APP門戶界面設計

目錄

前言

這是AS開發APP門戶界面（類微信界面）的一個實驗記錄博客，如果博客中有內容描述錯誤或者代碼有誤，歡迎批評和指正，

提示：以下是本篇文章正文內容，

一、實驗內容與界面展示

1. 實驗內容與技術

1、內容:請根據課程實操實作APP門戶界面框架設計，至少包含4個tab頁，能實作tab頁之間的點擊切換;
2、技術:使用布局(layouts）和分段(fragment)，對控制元件進行點擊監聽;

2. 界面展示

二、實作程序

先來設計我們的頁面，主頁面分為三個部分，頂部（top）、內容（content）、底部（bottom），頂部和底部可以用基本的LinearLayout進行線性布局，

1. 制作底部按鈕檔案bottom.xml

在res.layout包里new一個bottom.xml檔案，來寫底部的linearLayout，bottom平均分成四塊，每塊由一個圖片和一個文字構成，所以可以用水平的LinearLayout中再包裹一個豎直的LinearLayout，被包裹的每個LinearLayout里包含一個ImageButton和TextView控制元件，圖片可放在res/drawable里，

bottom.xml代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:orientation="horizontal"
    android:background="@color/design_default_color_secondary_variant">

    <LinearLayout
        android:id="@+id/tab_weixin"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:clickable="true"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/tab_weixin_normal"
            tools:srcCompat="@drawable/tab_weixin_normal" />

        <TextView
            android:id="@+id/textView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="微信"
            android:textColor="@color/white"
            android:textSize="23sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/tab_tongxunlu"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:clickable="true"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="103dp"
            android:layout_height="wrap_content"
            android:src="@drawable/tab_address_normal"
            tools:srcCompat="@drawable/tab_address_normal" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="通訊錄"
            android:textColor="@color/white"
            android:textSize="23sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/tab_faxian"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:clickable="true"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/tab_find_frd_normal"
            tools:srcCompat="@drawable/tab_find_frd_normal" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="發現"
            android:textColor="@color/white"
            android:textSize="23sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/tab_shezhi"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:clickable="true"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/tab_settings_normal"
            tools:srcCompat="@drawable/tab_settings_normal" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="設定"
            android:textColor="@color/white"
            android:textSize="23sp" />
    </LinearLayout>

</LinearLayout>

屬性解釋：

外部LinearLayout：

android:orientation=“horizontal”
布局中組件的排列方式，有horizontal（水平）和vertical（垂直）兩種方式

內部ImageView：

tools:srcCompat="@drawable/tab_weixin_normal"
vector繪制圖片的地址

• 在執行時，只出現圖示對應的文字而不出現圖示的原因是，專案在打包的時候它只會打包Android參考的，所以，圖片的參考可以再寫一個Android：src=“圖片地址”，對原呼叫進行覆寫，

2. 制作頂部檔案top.xml

在res.layout包里new一個top.xml檔案，在其頂部的linearLayout中寫一個TextView，

top.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:background="@color/teal_700">

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="微信"
        android:textColor="@color/white"
        android:textSize="30sp" />
</LinearLayout>

屬性解釋：

android:id="@+id/textView2"
為組件設定一個資源id，在java檔案中可以通過findViewById(id)找到該組件

android:layout_width=“wrap_content”
布局的寬度，通常不直接寫數字，用wrap_content（組件實際大小），fill_parent或者match_parent填滿父容器

android:layout_height=“wrap_content”
布局的高度，引數同上

android:layout_weight=“1”
用來等比例地劃磁區域，最簡單的用法為：要等比例劃分，分誰，誰為0，weight按比例即可

android:background="@color/teal_700"
為組件設定一個背景圖片，或者直接用顏色覆寫，顏色有很多種，本博客實驗選用的水藍綠色，

android:gravity=“center”
表示textView中的文字相對于TextView的對齊方式，

android:text=“微信”
要顯示的文字

android:textColor="@color/white"
設定文字的顏色

android:textSize=“30sp” />
設定文字的大小

3. activity_main.xml檔案的相關配置添加

activity_main.xml是app運行后顯示的主頁面，所以配置該檔案，就是對主頁面顯示的內容布局，整個主頁面使用豎直的LinerLayout，將top.xml和bottom.xml匯入進來就好了，當然還有中間內容content，content是應對Fragment，所以要使用FrameLayout作為容器，

activity_main.xml代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

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

    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1">


    </FrameLayout>

    <include layout="@layout/bottom" />
</LinearLayout>

主頁面設計的圖片：

4. 創建Fragment類

在java中的包里創建4個Fragment類，重寫其中的onCreateView方法回傳我們之前設計好的相應的視圖（因為tabbar有四個，每個對應不同的內容）

下面以第一欄——“微信”攔為例子

• 在app/com.example.wechart目錄下新建Fragment（blank）類，并根據情況創建四個，并分別命名為bottom.xml對應四個按鈕的名稱，

• 并在res/layout目錄下創建四個對應名稱的Layout XML File，

在每個生成的Fragment類中只保留以下方法，（以weixinFragment.java為例）

public class weixinFragment extends Fragment {


    public weixinFragment() {
        // Required empty public constructor
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_weixin, container, false);
    }
}

配置fragment_wechat.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".weixinFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="這是微信界面"
        android:textSize="30sp"/>

</LinearLayout>

5. 配置MainActivity.java檔案

接下來就到我們最后的部分啦，在MainActivity中“顯示”我們的寫的布局頁面，實作我們的功能：點擊監聽、界面切換、按鈕變化，

5.1 宣告變數

    private Fragment weixinFragment=new weixinFragment();
    private Fragment tongxunluFragment=new tongxunluFragment();
    private Fragment faxianFragment=new faxianFragment();
    private Fragment shezhiFragment=new shezhiFragment();
    private FragmentManager fragmentManager;

    private View LinearLayout1,LinearLayout2,LinearLayout3,LinearLayout4;
    private ImageView imageWeixin,imagetongxunlu,imagefaxian,imageshezhi;
    private TextView textView;

變數說明：
Fragment：對應創建的Fragment
FragmentManager：管理Fragment的類
ImageView：對應之前創建的ImageView
LinearLayout：對應之前創建的LinearLayout

5.2 功能實作——點擊監聽

實作View.OnClickListener介面中onClick(View v)方法，

• 要設定點擊時間，需要將MainActivity實作View.OnClickListener介面
  public class MainActivity extends AppCompatActivity implements View.OnClickListener{…}

/**
 * 設定監聽范圍
 */
        LinearLayout1.setOnClickListener(this);
        LinearLayout2.setOnClickListener(this);
        LinearLayout3.setOnClickListener(this);
        LinearLayout4.setOnClickListener(this);
       
    @Override
    public void onClick(View v) {
        resetImage();
        switch (v.getId()){
            case R.id.tab_weixin:
                showfragment(0);
                break;
            case R.id.tab_tongxunlu:
                showfragment(1);
                break;
            case R.id.tab_faxian:
                showfragment(2);
                break;
            case R.id.tab_shezhi:
                showfragment(3);
                break;
            default:
                break;
        }

    }

5.3 功能實作——界面切換

我們需要借助FragmentManager對Fragment進行管理，用FragmentTransaction管理Fragment所有的展示互動以及回滾事件，我們要先將所有的Fragment添加進去：

    private void initFragment(){
        fragmentManager=getFragmentManager();
        FragmentTransaction transaction=fragmentManager.beginTransaction();
        transaction.add(R.id.content,weixinFragment);
        transaction.add(R.id.content,tongxunluFragment);
        transaction.add(R.id.content,faxianFragment);
        transaction.add(R.id.content,shezhiFragment);
        transaction.commit();
    }

選擇對應按鈕后，頁面的切換，

    private void showfragment(int i){
        FragmentTransaction transaction=fragmentManager.beginTransaction();
        hideFragment(transaction);
        switch (i){
            case 0:
                textView.setText("微信");
                transaction.show(weixinFragment);
                imageWeixin.setImageResource(R.drawable.tab_weixin_pressed);
                break;

            case 1:
                textView.setText("通訊錄");
                transaction.show(tongxunluFragment);
                imagetongxunlu.setImageResource(R.drawable.tab_address_pressed);
                break;

            case 2:
                textView.setText("發現");
                transaction.show(faxianFragment);
                imagefaxian.setImageResource(R.drawable.tab_find_frd_pressed);
                break;

            case 3:
                textView.setText("設定");
                transaction.show(shezhiFragment);
                imageshezhi.setImageResource(R.drawable.tab_settings_pressed);
                break;

            default:
                break;
        }
        transaction.commit();
    }

此時查看app時，會發現所有Fragment都重疊起來，導致錯誤，因此我們要先將所有Fragment都隱藏，然后選擇相應按鈕時顯示對應Fragment就好啦！

    private void hideFragment(FragmentTransaction transaction){
        transaction.hide(weixinFragment);
        transaction.hide(tongxunluFragment);
        transaction.hide(faxianFragment);
        transaction.hide(shezhiFragment);
    }

打開該app時，首先先展示的頁面，

        showfragment(0);

5.4 功能實作——按鈕變化

按鈕通過設定ImageView的影像來源就能很快實作預期的效果了，

• 點擊后變為另外一個圖示（以微信圖示為例），將該方法寫入showfragment函式內，當點擊微信的時候，展現微信頁面的同時，微信圖示也變為點擊事件發生后的樣子，

imageWeixin.setImageResource(R.drawable.tab_weixin_pressed);

• 在點擊另外一個圖示時，該微信圖示要變回原來的樣子，于是寫了restImage函式，放入onClick函式里，隨著事件的發生，呼叫該函式，實作按鈕的變化，

    public void resetImage(){
        imageWeixin.setImageResource(R.drawable.tab_weixin_normal);
        imagetongxunlu.setImageResource(R.drawable.tab_address_normal);
        imagefaxian.setImageResource(R.drawable.tab_find_frd_normal);
        imageshezhi.setImageResource(R.drawable.tab_settings_normal);

    }

        resetImage();

5.6 OnCreate執行上面所寫函式方法實作具體功能

在MainActivity中，執行OnCreate函式時執行初始化、監聽等函式，

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);

        textView=findViewById(R.id.textView2);

        LinearLayout1=findViewById(R.id.tab_weixin);
        LinearLayout2=findViewById(R.id.tab_tongxunlu);
        LinearLayout3=findViewById(R.id.tab_faxian);
        LinearLayout4=findViewById(R.id.tab_shezhi);

        imageWeixin=findViewById(R.id.imageView);
        imagetongxunlu=findViewById(R.id.imageView1);
        imagefaxian=findViewById(R.id.imageView2);
        imageshezhi=findViewById(R.id.imageView3);

        LinearLayout1.setOnClickListener(this);
        LinearLayout2.setOnClickListener(this);
        LinearLayout3.setOnClickListener(this);
        LinearLayout4.setOnClickListener(this);

        initFragment();
        showfragment(0);

    }

在OnCreate()函式中呼叫
supportRequestWindowFeature(Window.FEATURE_NO_TITLE);（注意要寫在setContentVire()函式的前面，否則會報錯）

三、原始碼倉庫

碼云倉庫地址：https://github.com/Julia-rs-zhu/App_wechart.git

總結

剛開始學習移動開發，很感興趣，感覺很有意思，通過數行代碼能實作這些效果，真是件新奇的事情，非常有成就感！不過目前只是剛剛入門而已，還得繼續努力鴨！
第一次寫博客，發現真的不太容易，希望看博客的朋友們可以多多包含，平時在博客上時經常學習和搜集知識，現在的我有幸有這樣的一個機會可以也在博客里分享自己的經驗啦~相信在這學期移動開發的學習中，在博客發文累計下，我的文章也可以變得越來越細致且通俗易懂！
寫博客對我們這些正在學習的學生來說真的是件很好的事情，實驗報告面向的是老師，所以內容更加的專業凝練；但是博客更多地是面向學習者，內容故而更加的通俗細致，所以在寫博客的時候，讓我們將課上學的模模糊糊的東西，再重現出來的時候，我們又自己學習了一遍鞏固了知識，同時又在社區做了一定的奉獻，當然里面可能還有不足的地方或者不正確的地方，歡迎大家批評指正，共同進步！
今天就到這里啦，蟹蟹看到這里的盆友！共勉！