内容:
1、准备工作
2、新建一个新闻的实体类News
3、新建布局文件news_content_frag.xml,作为新闻内容的布局
4、NewsContentFragment类,继承自Fragment
5、新建NewsContentActivity活动,将布局名指定为
news_content.xml
6、创建一个实现新闻列表的布局news_title_frag.xml
7、新建news_item.xml,作为RecyclerView子项的布局
8、新建展示新闻列表的碎片NewsTitleFragment
9、在NewsTitleFragment中新建一个内部类NewsAdapter来作为RecyclerView的适配器
10、修改NewsTitleFragment中的代码
一、准备工作
在app/build.gradle的dependencies中,加入以下一行代码
implementation 'androidx.recyclerview:recyclerview:1.1.0'
二、 新建一个新闻的实体类News
package com.example.fragmenttest;
public class News {
private String title;//新闻标题
private String 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_content_frag.xml,作为双页模式下新闻内容部分的布局
在xml文件中设置android:visibility="invisible"
故在应用时,应将该设置修改为visible
<?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/visiblity_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:visibility="invisible">
<!-- 1、头部部分:显示新闻标题 -->
<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="10dp"
android:background="#000"/>
<!-- 2、正文部分:显示新闻内容 -->
<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>
四、创建两种模式下共用新闻内容的Fragment:NewsContentFragment类,继承自Fragment
将invisible修改为visible状态:
visibilityLayout.setVisibility(View.VISIBLE);
package com.example.fragmenttest;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
/**
* NewsContentFragment类,继承自Fragment
*/
public class NewsContentFragment extends Fragment{
private View view;
/**
*
* 加载刚创建好的news_content_frag布局
*
* @param inflater
* @param container
* @param savedInstanceState
* @return
*/
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
/**
* resource : 它是要解析的XML文件的id号(必填)
* root : 如果传入不为空, attachToRoot也为true, 就把XML解析后的view加入root子控件, 然后返回这个root.
* 否则, 就返回一个解析之后的XML生成的view.
* attachToRoot : 决定是否让root成为返回值的父控件
*
*/
view=inflater.inflate(R.layout.news_content_frag,container,false);
return view;
}
/**
*
* 将新闻标题和新闻内容显示在界面上
*
* @param newsTitle
* @param newsContent
*/
public void refresh(String newsTitle,String newsContent){
View visibilityLayout=view.findViewById(R.id.visiblity_layout);
visibilityLayout.setVisibility(View.VISIBLE);
//分别获取到新闻标题和新闻内容的控件
TextView newsTilteText=(TextView)view.findViewById(R.id.news_title);
TextView newsContentText=(TextView)view.findViewById(R.id.news_content);
//刷新新闻的标题和内容
newsTilteText.setText(newsTitle);
newsContentText.setText(newsContent);
}
}
五、新建NewsContentActivity活动:单页模式下引用NewsContentFragment的Activity;
将布局名指定为news_content.xml:单页模式下新闻内容部分的布局
1、news_content.xml
充分发挥代码的复用性,在布局中直接引入NewsContentFragment
这样也相当于把news_content_frag布局的内容自动加了进来
android:name="com.example.fragmenttest.NewsContentFragment"
<?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"
>
<fragment
android:id="@+id/news_content_fragment"
android:name="com.example.fragmenttest.NewsContentFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
2、NewsContentActivity
package com.example.fragmenttest;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
/**
* NewsContentActivity,继承自AppCompatActivity
*/
public class NewsContentActivity extends AppCompatActivity {
/**
* 启动活动的最佳方法:无须阅读其他代码,就可以非常清晰的指导启动NewsContentActivity需要传递拿些数据
* @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);
}
/**
*
* 通过Intent获取到了传入的新闻标题和新闻内容,然后调用FragmentManager的findFragmentById()方法
* 得到 NewsContentFragment的实例,接着调用 NewsContentFragment 的 refresh()方法
*
* @param savedInstanceState
*/
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.news_content);
//获取传入的新闻标题和新闻内容
String newsTitle=getIntent().getStringExtra("news_title");
String newsContent=getIntent().getStringExtra("news_content");
NewsContentFragment newsContentFragment=(NewsContentFragment)
getSupportFragmentManager().findFragmentById(R.id.news_content_fragment);
//将新闻标题和新闻内容显示在界面上
newsContentFragment.refresh(newsTitle,newsContent);
}
}
六、创建布局news_title_frag.xml:两种模式下共用新闻标题列表的布局
在这里用到了RecyclerView,那么就必定少不了子项的布局
之后会新建news_item.xml作为其子项布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/news_title_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
七、新建布局news_item.xml:新闻标题列表的子布局(作为RecyclerView子项的布局)
设定当文本内容超出空间宽度时,文本的缩略方式,这里指定成end,表示在尾部进行缩略
android:ellipsize="end"
设置这个TextView只能单行显示
android:singleLine="true"
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:id="@+id/news_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true"
android:ellipsize="end"
android:textSize="18sp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="15dp"
android:paddingBottom="15dp"
>
</TextView>
八、新建NewsTitleFragment:两种模式下新闻标题部分的碎片
package com.example.fragmenttest;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
public class NewsTitleFragment extends Fragment {
private boolean isTwoPage;
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view=inflater.inflate(R.layout.news_title_frag,container,false);
return view;
}
@Override
public void onActivityCreated(@Nullable Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
if(getActivity().findViewById(R.id.news_content_layout)!=null){
isTwoPage = true;
}
else{
isTwoPage=false;
}
}
}
通过在活动中能否找到一个id为news_content_layout的View来判断当前是双页模式还是单页模式
因此,需要修改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">
<fragment
android:id="@+id/news_title_fragment"
android:name="com.example.fragmenttest.NewsTitleFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</FrameLayout>
通过限定符的方式系统区分运行的大屏幕还是小屏幕,新建适配大屏幕的布局文件夹layout-sw600dp,在其下创建activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment
android:id="@+id/news_title_fragment"
android:name="com.example.fragmenttest.NewsTitleFragment"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
/>
<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.example.fragmenttest.NewsContentFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</FrameLayout>
</LinearLayout>
九、在NewsTitleFragment中新建一个内部类NewsAdapter来作为RecyclerView的适配器
package com.example.fragmenttest;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import androidx.recyclerview.widget.RecyclerView;
import java.util.List;
public class NewsTitleFragment extends Fragment {
private boolean isTwoPage;
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view=LayoutInflater.from(getContext()).inflate(R.layout.news_content_frag,container,
false);
return view;
}
@Override
public void onActivityCreated(@Nullable Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
if(getActivity().findViewById(R.id.news_content_layout)!=null){
isTwoPage = true;
}
else{
isTwoPage=false;
}
}
class NewsAdapter extends RecyclerView.Adapter<NewsAdapter.ViewHolder>{
private List<News> mNewsList;
public class ViewHolder extends RecyclerView.ViewHolder{
TextView newsTitleText;
public ViewHolder(@NonNull View itemView) {
super(itemView);
newsTitleText=(TextView) itemView.findViewById(R.id.news_title);
}
}
public NewsAdapter(List<News> newsList){
mNewsList = newsList;
}
@NonNull
@Override
public ViewHolder onCreateViewHolder(@NonNull 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(isTwoPage){
//如果是双页模式,则刷新NewsContentFragment的内容
NewsContentFragment newsContentFragment=
(NewsContentFragment)getFragmentManager().findFragmentById(R.id.news_content_fragment);
newsContentFragment.refresh(news.getTitle(),news.getContent());
news.getContent();
}
else{
//如果是单页模式,则直接启动NewsContentActivity
NewsContentActivity.actionStart(getActivity(),news.getTitle(),news.getContent());
}
}
});
return holder;
}
@Override
public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
News news=mNewsList.get(position);
holder.newsTitleText.setText(news.getTitle());
}
@Override
public int getItemCount() {
return mNewsList.size();
}
}
}
十、修改NewsTitleFragment中的代码
1、修改onCreateView
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view=LayoutInflater.from(getContext()).inflate(R.layout.news_content_frag,container,
false);
RecyclerView newsTitleRecyclerView=(RecyclerView)view.findViewById(R.id.news_title_recycler_view);
LinearLayoutManager layoutManager=new LinearLayoutManager(getActivity());
newsTitleRecyclerView.setLayoutManager(layoutManager);
NewsAdapter adapter=new NewsAdapter(getNews());
newsTitleRecyclerView.setAdapter(adapter);
return view;
}
2、新增getNews
private List<News> getNews() {
List<News> newsList=new ArrayList<>();
for (int i = 0; i <=50 ; i++) {
News news=new News();
news.setTitle("This is news title "+i);
news.setContent(getRandomLengthContent("This is news content "+i+"."));
newsList.add(news);
}
return newsList;
}
3、新增getRandomLengthContent
private String getRandomLengthContent(String content) {
Random random=new Random();
int length=random.nextInt(20)+1;
StringBuilder builder=new StringBuilder();
for (int i = 0; i < length ; i++) {
builder.append(content);
}
return builder.toString();
}
十一、主活动MainActivity.java
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
十二、运行效果
1、在手机上
[文件]
2、在平板上