目錄
- 0 實驗環境
- 1 界面展示
- 2 功能說明
- 3 核心代碼
- 3.1 實作RecyclerView控制元件的設計開發
- 3.2 添加了文字庫assets
- 3.3 實作點擊事件對item中的每個LinearLayout實作點擊顯示內容
- 3.4 實作頂部懸浮（吸頂），對每個LinearLayout進行分組，且在上下滑動時分組名在頂部懸浮顯示
- 3.5 實作瀑布流，選單朋友圈實作圖片的展示，展現瀑布流的效果
- 4 代碼倉庫
- 5 總結
0 實驗環境
在Android Studio中進行有關代碼的撰寫和界面效果展示
1 界面展示
2 功能說明
（1）在上次微信界面設計的基礎上，選擇一個Fragment檔案實作RecyclerView控制元件的設計開發；
（2）我選擇在“聯系人”界面進行RecyclerView的縱向布局設計并用分割線將內容分開；
（3）在Android Studio中添加了文字庫assets，可以將TextView文本框中的文本設定自己想要的字體；
（4）實作點擊事件，對item中的每個LinearLayout實作點擊顯示內容；
（5）實作頂部懸浮（吸頂），對每個LinearLayout進行分組，且在上下滑動時分組名在頂部懸浮顯示；
（6）實作瀑布流，選單朋友圈實作圖片的展示，展現瀑布流的效果
3 核心代碼
3.1 實作RecyclerView控制元件的設計開發
核心代碼：
Fragment_contacts.xml檔案的改寫：
（洗掉了上次的TextView文本框的簡單內容展示，添加了RecyclerView組件）
<?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:orientation="vertical">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerview_contacts"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"/>
</LinearLayout>
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"
android:layout_margin="10dp"
android:background="@color/ivory"
android:orientation="vertical" >
<TextView
android:id="@+id/counter"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="序號"
android:textSize="15sp"
android:textColor="@color/black"
android:gravity="right"/>
<TextView
android:id="@+id/nickname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="昵稱"
android:textSize="30sp"
android:textColor="@color/blue"/>
<TextView
android:id="@+id/personalized_signature"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="個性簽名"
android:textSize="20sp"
android:textColor="@color/pinkish_red"/>
</LinearLayout>
Adapter配接器的撰寫：
（Adapter負責從資料源取得資料并告訴串列如何顯示）
public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.Myviewholder> {
//昵稱串列
private List<String> mList;
//個性簽名串列
private List<String> nList;
private Context context;
//帶參建構式
public RecyclerViewAdapter(List<String> mList, List<String> nList, Context context) {
//昵稱串列
this.mList = mList;
//個性簽名串列
this.nList = nList;
this.context = context;
}
@NonNull
@Override
public Myviewholder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View view = (View) LayoutInflater.from(parent.getContext()).inflate(R.layout.item, parent, false);
Myviewholder myviewholder = new Myviewholder((view));
return myviewholder;
}
@Override
public void onBindViewHolder(@NonNull Myviewholder holder, int position) {
holder.counter.setText(position + 1 + " ");
holder.nickname.setText(mList.get(position));
holder.personalized_signature.setText(nList.get(position));
}
@Override
public int getItemCount() {
return mList.size();
}
public class Myviewholder extends RecyclerView.ViewHolder {
TextView counter, nickname, personalized_signature;
public Myviewholder(@NonNull View itemView) {
super(itemView);
counter = itemView.findViewById((R.id.counter));
nickname = itemView.findViewById(R.id.nickname);
personalized_signature = itemView.findViewById(R.id.personalized_signature);
}
}
}
Fragment_contacts.java檔案的改寫：
（實作配接器物件的創建、使用及串列資料的添加，資料的添加在此省略）
public class Fragment_contacts extends Fragment {
private Context context;
//昵稱串列
private List<String> mList = new ArrayList<>();
//個性簽名串列
private List<String> nList = new ArrayList<>();
public Fragment_contacts() {
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_contacts, container, false);
context = view.getContext();
InitNickNameList();
InitSignatureList();
RecyclerView recyclerView = view.findViewById(R.id.recyclerview_contacts);
RecyclerViewAdapter adapter = new RecyclerViewAdapter(mList, nList, context);
recyclerView.setAdapter(adapter);
/*LinearLayoutManager是一個工具類，承擔了一個View(RecyclerView)的布局、測量、子View 創建、 復用、 回收、 快取、 滾動等操作，
addItemDecoration用來進行分割線設計*/
LinearLayoutManager manager = new LinearLayoutManager(context);
manager.setOrientation(LinearLayoutManager.VERTICAL);
recyclerView.setLayoutManager(manager);
recyclerView.addItemDecoration(new DividerItemDecoration(context, LinearLayoutManager.VERTICAL));
return view;
}
3.2 添加了文字庫assets
在TextView物件或樣式中使用字體，可以是單個字體檔案，也可以是字體系列中的字體，還可以將TextView文本框中的文本設定自己想要的字體！
要為其設定字體TextView，執行以下操作之一：
在布局XML檔案中，將fontFamily屬性設定為要訪問的字體檔案，
即在TextView組件中添加字體屬性，如下：
android:fontFamily="@font/huawencaiyun"
打開“ 屬性”視窗以設定其字體 TextView，
注意：“屬性”視窗僅在設計編輯器打開時可用，選擇視窗底部的“ 設計”選項卡，從fontFamily串列中選擇字體，
如果要添加自己下載的字體檔案，只需將其粘貼到左側的res/font目錄中，注意檔案名稱需修改為小寫英文字母命名**（若在AS里無法操作，只需將AS關閉，到其專案檔案夾內直接粘貼并重命名），**
同時系統字體檔案夾（C:\Windows\Fonts）內自帶了許多字體，可以自行挑選復制！
修改字體后的效果：
3.3 實作點擊事件對item中的每個LinearLayout實作點擊顯示內容
RecyclerView的點擊事件有兩種寫法：
（1）在Adapter里面直接對控制元件做點擊事件；
（2）寫介面，在Activity或Fragment上實作介面中定義的方法，
下面，我將采用第一種方法：
在Adapter的函式onBindViewHolder()中添加點擊事件代碼
final String content = mList.get(position);
holder.itemView.setContentDescription(content);
holder.itemView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(context, "您點擊的聯系人是：" + content, Toast.LENGTH_SHORT).show();
}
});
3.4 實作頂部懸浮（吸頂），對每個LinearLayout進行分組，且在上下滑動時分組名在頂部懸浮顯示
由于前期未對資料進行組別屬性的定義，后期在對資料進行重構（重新定義一個類，用于存放資料本身及其分組資訊等）時復雜度較高（需修改大量代碼），故并未實作此功能，
3.5 實作瀑布流，選單朋友圈實作圖片的展示，展現瀑布流的效果
也需新建item.xml和修改朋友圈選單對應的fragment.xml、fragment.java，還需添加一個Adapter.java實作從資料源取得資料并告訴串列如何顯示，
StaggeredGridAdapter.java檔案：
public class StaggeredGridAdapter extends RecyclerView.Adapter<StaggeredGridAdapter.DataViewHolder>{
private Context mContext;
private RecyclerView recyclerView;
private List<Integer> mList;
private List<Integer> mHeight;
//帶參建構式
public StaggeredGridAdapter(Context mContext, List<Integer> mList) {
this.mContext = mContext;
this.mList = mList;
}
/**
* 初始化每個Item的高度（瀑布流效果）
* @return
*/
public List<Integer> initHeight(){
mHeight = new ArrayList<>();
for (int i=0;i<mList.size();i++){
//隨機設定圖片高度
mHeight.add((int) (Math.random()*300)+300);
}
return mHeight;
}
/**
* 用于創建ViewHolder
* @param parent
* @param viewType
* @return
*/
@Override
public DataViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(mContext).inflate(R.layout.item_image,null);
//使用代碼設定寬高（xml布局設定無效時）
view.setLayoutParams(new ViewGroup.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.WRAP_CONTENT));
DataViewHolder holder = new DataViewHolder(view);
return holder;
}
/**
* 系結資料
* @param holder
* @param position
*/
@Override
public void onBindViewHolder(DataViewHolder holder, int position) {
//設定每個Item的高度
ViewGroup.LayoutParams h = holder.iv_data.getLayoutParams();
h.height = mHeight.get(position);
//設定圖片
holder.iv_data.setImageResource(mList.get(position));
}
/**
* 選項總數
* @return
*/
@Override
public int getItemCount() {
return mList.size();
}
/**
* 創建ViewHolder
*/
public static class DataViewHolder extends RecyclerView.ViewHolder{
ImageView iv_data;
public DataViewHolder(View itemView) {
super(itemView);
iv_data = (ImageView) itemView.findViewById(R.id.item_ImageView);
}
}
/**
* 將RecycleView附加到Adapter上
*/
@Override
public void onAttachedToRecyclerView(RecyclerView recyclerView) {
super.onAttachedToRecyclerView(recyclerView);
this.recyclerView= recyclerView;
//初始化每個Item的高度
initHeight();
}
/**
* 將RecycleView從Adapter解除
*/
@Override
public void onDetachedFromRecyclerView(RecyclerView recyclerView) {
super.onDetachedFromRecyclerView(recyclerView);
this.recyclerView = null;
}
}
Fragment_circle_friend.java檔案實作圖片瀑布流顯示：
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_circle_friend, container, false);
context = view.getContext();
//添加資料
InitImageList();
//創建Adapter物件
RecyclerView recyclerView = view.findViewById(R.id.recyclerview_circle_friend);
StaggeredGridAdapter adapter = new StaggeredGridAdapter(context, mList);
recyclerView.setAdapter(adapter);
recyclerView.setLayoutManager(new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL));
return view;
}
4 代碼倉庫
具體代碼已上傳至gitee代碼倉庫
5 總結
在上次微信界面設計的基礎上
主要實作了如下功能：
（1）選擇一個Fragment檔案實作RecyclerView控制元件的設計開發；
（2）我選擇在“聯系人”界面進行RecyclerView的縱向布局設計并用分割線將內容分開；
（3）在Android Studio中添加了文字庫assets，可以將TextView文本框中的文本設定自己想要的字體；
（4）實作點擊事件，對item中的每個LinearLayout實作點擊顯示內容；
（5）實作頂部懸浮（吸頂），對每個LinearLayout進行分組，且在上下滑動時分組名在頂部懸浮顯示；
（6）實作瀑布流，選單朋友圈實作圖片的展示，展現瀑布流的效果，且點擊圖片時會顯示發表該圖片的好友名稱，
由于前期未對資料進行組別屬性的定義，后期在對資料進行重構（重新定義一個類，用于存放資料本身及其分組資訊等）時復雜度較高（需修改大量代碼），故并未實作此功能，
（注：第13次發文，如有錯誤和疑問，歡迎在評論區指出!）
——2021.10.16
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/319861.html
標籤：其他