Android Studio 學習（二）

阿新 • • 發佈：2020-12-27

技術標籤：android

Android Studio 學習（二）

安卓應用UI設計

學習目標：

1、掌握UI設計中的layout佈局（約束佈局）與基本控制元件（button、text、imageview等）；
2、掌握複雜控制元件與adapter的使用

專案功能說明：

（一）展示影音播放器片庫資源，用列表顯示韓劇、綜藝和電影三大類及它們所包含的節目名稱
（二）實現頂部懸浮的滑動列表功能，即向上滑動展示下面的內容時，分組名可以在頂部懸浮，直到該分組內容向上滑動退出螢幕頁面，分組名跟隨分組內容退出螢幕頁面

核心程式碼：

佈局檔案

在“片庫”頁面中有一個RelativeLayout以及一個RecycleView，並且使用include引用頂部的分組框

劇目（item）中有一個LineaLayout包含一個TextView並使用include引用頂部的分組框
分組框中有一個TextView

片庫頁面程式碼：

<?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">


    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/tab03_1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:overScrollMode="never"
        android:scrollbars="none" />

    <include layout="@layout/tab03_include_recycle_item" />
</RelativeLayout>

劇目頁面程式碼

<?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:orientation="vertical">

    <include layout="@layout/tab03_include_recycle_item" />

    <TextView
        android:id="@+id/tab03_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="14dp"
        android:text="@string/app_name" />
</LinearLayout>

分組框頁面程式碼

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tab03_header_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorAccent"
    android:padding="10dp"
    android:text="片庫"
    android:textColor="@android:color/white"
    android:textSize="20sp">

</TextView>

ContactData的設計
ContactData中包含分組名：group；聯絡人姓名：name ,以及它們的get,set方法

ContactAdapter的設計
建構函式：傳入一個Context
setContactDataList（）:設定一個ContactData的列表並賦值，動態更新
onCreateViewHolder（）：設定View並返回ContactViewHolder
onBindViewHolder（）：設定頂部懸浮通過是否是第一個頭部，以及有無頭部來判斷；設定點選事件
getItemCount()：根據列表是否為空返回列表的長度
onBindViewHolder() 程式碼示例：

public static final int FIRST_STICKY_VIEW = 1;
    public static final int HAS_STICKY_VIEW = 2;
    public static final int NONE_STICKY_VIEW = 3;
public void onBindViewHolder(@NonNull ContactViewHolder holder, int position) {
        final String content = mList.get(position).getName();
        ContactData stickyData = mList.get(position);

        holder.tvName.setText(stickyData.getName());

        if (position == 0) {
            holder.tvGroup.setVisibility(View.VISIBLE);
            holder.tvGroup.setText(stickyData.group);
            holder.itemView.setTag(FIRST_STICKY_VIEW);
        } else {
            if (!TextUtils.equals(stickyData.group, mList.get(position - 1).group)) {
                holder.tvGroup.setVisibility(View.VISIBLE);
                holder.tvGroup.setText(stickyData.group);
                holder.itemView.setTag(HAS_STICKY_VIEW);
            } else {
                holder.tvGroup.setVisibility(View.GONE);
                holder.itemView.setTag(NONE_STICKY_VIEW);
            }
        }
        holder.itemView.setContentDescription(stickyData.group);
        holder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(mContext, "你點選的是：" + content, Toast.LENGTH_SHORT).show();
            }
        });
}

ContactFragment的設計
使用inflater.inflate將View例項化
initView()：初始化RecycleView，設定adapter，並進行滾動監聽
initList（）：初始化List,將資料新增到List中
initData() ：初始化mDataList,將mList中的資料切割並加入到mDataList
initView()程式碼示例：

private void initView() {
        RecyclerView recyclerView = view.findViewById(R.id.tab03_1);
        adapter = new ContactAdapter(getActivity());


        final TextView tvGroup = view.findViewById(R.id.tab03_header_view);

        LinearLayoutManager manager = new LinearLayoutManager(getActivity());
        recyclerView.setLayoutManager(manager);
        recyclerView.setHasFixedSize(true);
        recyclerView.setAdapter(adapter);

        adapter.setContactDataList(mDataList);

        recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);

                View stickyInfoView = recyclerView.findChildViewUnder(
                        tvGroup.getMeasuredWidth() / 2, 5);

                if (stickyInfoView != null && stickyInfoView.getContentDescription() != null) {
                    tvGroup.setText(String.valueOf(stickyInfoView.getContentDescription()));
                }

                View transInfoView = recyclerView.findChildViewUnder(
                        tvGroup.getMeasuredWidth() / 2, tvGroup.getMeasuredHeight() + 1);

                if (transInfoView != null && transInfoView.getTag() != null) {

                    int transViewStatus = (int) transInfoView.getTag();
                    int dealtY = transInfoView.getTop() - tvGroup.getMeasuredHeight();

                    if (transViewStatus == ContactAdapter.HAS_STICKY_VIEW) {
                        if (transInfoView.getTop() > 0) {
                            tvGroup.setTranslationY(dealtY);
                        } else {
                            tvGroup.setTranslationY(0);
                        }
                    } else if (transViewStatus == ContactAdapter.NONE_STICKY_VIEW) {
                        tvGroup.setTranslationY(0);
                    }
                }
            }
        });
    }

執行流程：當我們滾動RecycleView時，滾動監聽會根據item的頂部懸浮框是否是第一個頭部以及有無頭部來設定其內容，點選item時，點選監聽會顯示當前內容

執行截圖：

在這裡插入圖片描述

實驗小結

Adapter–>C(控制器)
1.作用
把資料來源中資料以某種樣式（xml檔案）顯示在檢視中。
2.分類
（一）ArrayAdapter：他只能處理列表項內容全是文字的情況。
資料來源：陣列或者List物件或者其他
（二）SimpleAdapter：他不僅可以處理列表項全是文字的情況，當列表項中還有其他控制元件時，同樣可以處理。
資料來源：只能為List<Map<“鍵”，“值”>>形式的資料
（三）自定義Adapter：根據xml檔案中定義的樣式驚醒列表項的填充，適用性最強。
（四）SimpleCursorAdapter：專門用於把遊標中的資料映像到列表中
3.自定義Adapter
建立類，繼承自BaseAdapter
重寫其中的四個方法
　　Int getCount()：返回的是資料來源物件的個數，即列表項數
　　Object getItem(int position)：返回指定位置position上的列表
　　Long getItemId(int position)：返回指定位置處的行id
　　View getView()：返回列表項對應的檢視，方法體中例項化檢視填充器,用檢視填充器,根據Xml檔案，例項化檢視,根據佈局找到控制元件，並設定屬性,返回View檢視

專案原始碼：https://gitee.com/chenranranran/mobile-terminal-development.git

Android Studio 學習（二）