文章目录
- Item:标题子项
- 布局文件
- Java代码
- 标题碎片
- 布局文件
- Java代码
- 新闻内容碎片
- 布局文件
- Java代码
- 新闻内容活动
- 布局文件
- Java代码
- 首界面
- 布局文件
- Java代码
Item:标题子项
布局文件
news_item.xml
:
<TextViewxmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/news_title"android:layout_width="match_parent"android:layout_height="wrap_content"android:lines="1"android:ellipsize="end"android:textSize="18sp"android:paddingLeft="10dp"android:paddingRight="10dp"android:paddingTop="15dp"android:paddingBottom="15dp"></TextView>
- padding:给控件周围加上补白,避免文本内容紧靠边缘
- lines:规定文本内容只能单行显示
- ellipsize:设定当文本内容超出控件宽度时,文本的略缩方式
Java代码
public class News {private String title; // 标题private String content; // 内容public void setTitle(String title) {this.title = title;}public String getTitle() {return title;}public void setContent(String content) {this.content = content;}public String getContent() {return content;}
}
标题碎片
布局文件
news_title_frag.xml
:
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><androidx.recyclerview.widget.RecyclerViewandroid:id="@+id/news_title_recycler_view"android:layout_width="match_parent"android:layout_height="match_parent"/>
</LinearLayout>
Java代码
public class NewsTitleFragment extends Fragment {@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {View view = inflater.inflate(R.layout.news_title_frag, container, false);// 滚动控件实例RecyclerView newsTitleRecyclerView = view.findViewById(R.id.news_title_recycler_view);// 布局方式LinearLayoutManager layoutManager = new LinearLayoutManager(getActivity());// 设置RecyclerView布局方式为线性布局newsTitleRecyclerView.setLayoutManager(layoutManager);// 为布局添加适配器newsTitleRecyclerView.setAdapter(new NewsAdapter(getNews()));return view;}// 创建一个List<News>并返回private List<News> getNews(){List<News> newsList = new ArrayList<>();for(int i=1; i<=50; i++){News news = new News();news.setTitle("News Title" + i);news.setContent(getRandomLengthContent("News Content"+i+"."));newsList.add(news);}return newsList;}// 随机生成新闻内容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();}// 以内部类形式实现自定义适配器class NewsAdapter extends RecyclerView.Adapter<NewsAdapter.ViewHolder>{private List<News> NewsList;class ViewHolder extends RecyclerView.ViewHolder {TextView newsTitleText;public ViewHolder(View itemView) {super(itemView);newsTitleText = itemView.findViewById(R.id.news_title);}}public NewsAdapter(List<News> newsList){NewsList = newsList;}@Overridepublic 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);// 点击RecyclerView中的新闻标题时,启动NewsContentActiviryview.setOnClickListener((View v)->{// 获取点击项的News实例News news = NewsList.get(holder.getAdapterPosition());/* 单页模式 */// 启动新的活动显示新闻内容NewsContentActiviry.actionStart(getActivity(), news.getTitle(), news.getContent());/* 双页模式 *//*NewsContentFragment newsContentFragment = (NewsContentFragment) getParentFragmentManager().findFragmentById(R.id.news_content_fragment);newsContentFragment.refresh(news.getTitle(), news.getContent());*/});return holder;}@Overridepublic void onBindViewHolder(ViewHolder holder, int position) {News news = NewsList.get(position);holder.newsTitleText.setText(news.getTitle());}@Overridepublic int getItemCount() {return NewsList.size();}}
}
新闻内容碎片
布局文件
news_content_frag.xml
:
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><LinearLayoutandroid:id="@+id/visible_layout"android:orientation="vertical"android:visibility="invisible"android:layout_width="match_parent"android:layout_height="match_parent"><TextViewandroid:id="@+id/news_title"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:textSize="20sp"android:padding="10dp"/><Viewandroid:layout_width="match_parent"android:layout_height="1dp"android:background="#000"/><TextViewandroid:id="@+id/news_content"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"android:textSize="18sp"android:padding="15dp"/></LinearLayout><Viewandroid:layout_width="1dp"android:layout_height="match_parent"android:layout_alignParentLeft="true"android:background="@color/black" /></RelativeLayout>
- 内嵌的 LinearLayout 布局用于管理新闻内容碎片的布局。
- 两个 TextView 分别表示新闻标题与新闻内容。
- 两个 View 是两条黑色分割线,第一个用于在新闻内容碎片中分割新闻标题与新闻内容;第二个用于在双页模式下分割新闻内容碎片和标题碎片。
- 外层使用 RelativeLayout 布局是为了便于布置第二个 View。(
android:layout_alignParentLeft
属性)
单页模式:
双页模式:
PS:竖直黑色分割线左侧属于标题碎片,跟新闻内容碎片无关。
Java代码
public class NewsContentFragment extends Fragment {private View view;// 加载布局@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {view = inflater.inflate(R.layout.news_content_frag, container, false);return view;}// 将新闻标题和内容显示到界面上public void refresh(String newTitle, String newContent){View view1 = view.findViewById(R.id.visible_layout);view1.setVisibility(View.VISIBLE);TextView title = view.findViewById(R.id.news_title);TextView content = view.findViewById(R.id.news_content);title.setText(newTitle); // 刷新新闻标题content.setText(newContent); // 刷新新闻内容}
}
新闻内容活动
布局文件
在单页模式下,点击标题碎片中的标题子项时,会根据点击的新闻标题跳转到具体的新闻内容活动,
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><fragmentandroid:id="@+id/news_content_fragment"android:layout_width="match_parent"android:layout_height="match_parent"android:name="com.example.activitytest.Fragment.NewsContentFragment"/></LinearLayout>
Java代码
public class NewsContentActiviry extends AppCompatActivity {@Overrideprotected 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); // 刷新NewsContentFragment界面}public static void actionStart(Context context, String newsTitle, String newsContent){Intent intent = new Intent(context, NewsContentActiviry.class);intent.putExtra("news_title", newsTitle);intent.putExtra("news_content", newsContent);context.startActivity(intent);}
}
有关 actionStart 详见本文
首界面
布局文件
news_layout.xml
:注释部分解除之后即从单页布局变为双页布局
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:orientation="horizontal"android:layout_width="match_parent"android:layout_height="match_parent"><fragmentandroid:id="@+id/news_title_fragment"android:name="com.example.activitytest.Fragment.NewsTitleFragment"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"/><!--<FrameLayoutandroid:id="@+id/news_content_layout"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="3"><fragmentandroid:id="@+id/news_content_fragment"android:name="com.example.activitytest.Fragment.NewsContentFragment"android:layout_width="match_parent"android:layout_height="match_parent"/></FrameLayout>-->
</LinearLayout>
单页布局:
双页布局:
Java代码
public class NewsActivity extends AppCompatActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.news_layout);}
}