关于适配平板,我也是第一次接触,在网上的资料中,都是说关于比例问题,但是我想要的是一种在手机上是一种 布局,在平板上是另一种布局的样式,也是通过郭霖大神的《第一行代码》第二版接触的,现在就来罗列下我在实验过程中遇到的问题
首先给大家看一下效果
在手机上的样式:(右边是点击进去的样式)
在平板上的样式:
这就是全部样式啦···接下来看代码怎么实现的吧!
首先新建两个Fragment,分别是NewsTitleFragment和NewsContentFragment,他们两就是我们列表和内容的页面啦,
然后开始写内部布局:
news_title_frag
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="@+id/news_title_recycle_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
内部只有一个RecycleView,用来展示新闻列表(这是依赖:implementation 'com.android.support:recyclerview-v7:28.0.0')
news_content_frag:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="@+id/visibility_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="@+id/news_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:textSize="20sp" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#000" />
<TextView
android:id="@+id/news_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:padding="15dp"
android:textSize="18sp" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_alignParentLeft="true"
android:background="#000" />
</RelativeLayout>
这个内部主要是内容详情页面需要展示的页面布局,可以根据自己需要修改
这里我们先说NewsContentFragment里面的代码:
public class NewsContentFragment extends Fragment {
private View view;
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
view = inflater.inflate(R.layout.news_content_frag, container, false);
return view;
}
public void refresh(String newsTitle,String newsContent){
//对控件进行赋值
TextView newsTitleText = (TextView)view.findViewById(R.id.news_title);
TextView newsContentText = (TextView)view.findViewById(R.id.news_content);
newsTitleText.setText(newsTitle);
newsContentText.setText(newsContent);
}
}
这个Fragment里面的代码不多,因为他主要是给平板模式展示的,所以就没有过多的操作
接下来我们需要先写手机模式的内容详情页,新建一个NewsContentActivity用来当做手机模式下的内容详情页:
布局:activity_news_content
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".NewsContentActivity">
<!--直接引用我们平板模式下的内容详情页布局-->
<fragment
android:id="@+id/news_content_fragment"
android:name="com.zhongjiao.com.myapplication.NewsContentFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
这是NewsContentActivity中的方法:
public class NewsContentActivity extends AppCompatActivity {
/**
* 只是一个自定义跳转的方法,通过传入的参数,进行跳转内容详情页
* @param context
* @param newsTitle
* @param newsContent
*/
public static void actionStart(Context context, String newsTitle, String newsContent) {
Intent intent = new Intent(context, NewsContentActivity.class);
intent.putExtra("news_title", newsTitle);
intent.putExtra("news_content", newsContent);
context.startActivity(intent);
}
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_news_content);
//接收其他页面跳转过来的值
Intent intent = getIntent();
String news_title = intent.getStringExtra("news_title");
String news_content = intent.getStringExtra("news_content");
//通过布局中引用平板模式下的布局,获取到平板模式下的Fragment,并调用其中的方法进行设置数据
NewsContentFragment newsContentFragment = (NewsContentFragment) getSupportFragmentManager()
.findFragmentById(R.id.news_content_fragment);
newsContentFragment.refresh(news_title, news_content);
}
}
这个时候,就到了我们的MainActivity啦(NewsTitleFragment别急···),因为我们主要展示还是在MainActivity上,所以这个类也是我们判断当前是手机还是平板的重要抉择,在《第一行代码》第二版的时候,郭霖大神书上说在res下新建一个layout_sw600dp的文件夹,然后在内部新建一个activity_main.xml的布局,当前是手机还是平板都是通过这个包去选择要加载的布局,可能是我的模拟器出了问题,一直识别不出来layout-sw600dp包下的布局,所以,从网上查资料后发现,要将这个包名转成layout-land,这样就可以识别了
然后就是这两个activity_main.xml里面有什么不同呢:
layout下的activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/news_title_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--直接复用Title的页面布局,因为手机版就只需要展示列表就可以了-->
<fragment
android:id="@+id/news_title_fragment"
android:name="com.zhongjiao.com.myapplication.NewsTitleFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
这个是layout-land下的activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
tools:context=".MainActivity">
<!--这个就是左边的列表,也是复用title的布局-->
<fragment
android:id="@+id/news_title_fragment"
android:name="com.zhongjiao.com.myapplication.NewsTitleFragment"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<!--这个是用来管理右边的内容区域,注意这个ID,就是通过这个ID判断当前是平板还是手机-->
<!--这个文件名是系统用来识别哪个是平板和手机,而我们要通过ID判断哪个是平板还是手机-->
<FrameLayout
android:id="@+id/news_content_layout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3">
<!--复用了内容详情页面的布局-->
<fragment
android:id="@+id/news_content_fragment"
android:name="com.zhongjiao.com.myapplication.NewsContentFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
</LinearLayout>
接下来就是NewsTitleFragment内部的代码啦:
public class NewsTitleFragment extends Fragment {
//判断当前是平板还是手机
private boolean isTwoPane;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.news_title_frag, container, false);
//通过这个给RecycleView设置适配器
RecyclerView newsTitleRecyclerView = (RecyclerView) view.findViewById(R.id.news_title_recycle_view);
LinearLayoutManager layoutManager = new LinearLayoutManager(getActivity());
newsTitleRecyclerView.setLayoutManager(layoutManager);
NewsAdapter adapter = new NewsAdapter(getNews());
newsTitleRecyclerView.setAdapter(adapter);
return view;
}
@Override
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
//通过找ID的形式判断当前ID是否存在
if (getActivity().findViewById(R.id.news_content_layout) != null) {
//平板模式
isTwoPane = true;
} else {
//手机模式
isTwoPane = false;
}
}
private List<News> getNews() {
//模拟数据
List<News> newsList = new ArrayList<>();
for (int i = 1; i <= 50; i++) {
News news = new News();
news.setTitle("This is news title " + i);
news.setContent("This is news content " + i + ". ");
newsList.add(news);
}
return newsList;
}
//内部类NewsAdapter作为RecyclerView适配器
class NewsAdapter extends RecyclerView.Adapter<NewsAdapter.ViewHolder> {
private List<News> mNewsList;
class ViewHolder extends RecyclerView.ViewHolder {
TextView newsTitleText;
public ViewHolder(View view) {
super(view);
newsTitleText = (TextView) view.findViewById(R.id.news_title);
}
}
public NewsAdapter(List<News> newsList) {
mNewsList = newsList;
}
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.news_item, parent, false);
final ViewHolder holder = new ViewHolder(view);
view.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
News news = mNewsList.get(holder.getAdapterPosition());
if (isTwoPane) {
//若为平板模式,则刷新NewsContentFragment中的内容
NewsContentFragment newsContentFragment = (NewsContentFragment)
getActivity().getSupportFragmentManager().findFragmentById
(R.id.news_content_fragment);
//调用设置内容的方法
newsContentFragment.refresh(news.getTitle(), news.getContent());
} else {
//若为手机模式,则直接调用跳转的方法
NewsContentActivity.actionStart(getActivity(), news.getTitle(), news.getContent());
}
}
});
return holder;
}
@Override
public void onBindViewHolder(ViewHolder holder, int position) {
News news = mNewsList.get(position);
holder.newsTitleText.setText(news.getTitle());
}
@Override
public int getItemCount() {
return mNewsList.size();
}
}
}
这是模拟数据的Bean类(News):
public class News {
private String title;
private String content;
public News() {
}
public News(String title, String content) {
this.title = title;
this.content = content;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getContent() {
return content;
}
public void setContent(String content) {
this.content = content;
}
}
这个是适配器里面的条目布局(news_item.xml):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:maxLines="1"
android:textSize="18sp"
android:padding="10dp"
android:ellipsize="end"
android:id="@+id/news_title"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
内部就只有一个TextView,可以视自己需求更改···
到此所有逻辑都走完啦,你可以在模拟器上进行平板和手机之间的切换,看下效果,如果要实现更复杂的逻辑,可以进行参考,大体的思路是这样!