文章目錄
- 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);}
}