AS開發實驗一：仿微信界面-有解無憂

實驗環境:

Android Studio

實驗目標:

課程ppt上的仿微信界面（不要問我ppt在哪兒，我也不知道，反正QQ群檔案里沒有）

實驗知識點講解:

控制元件
TextView：文本
ImageView：圖片
布局
1.LinearLayout（線性布局）：通過設定“ android:orientation ”屬性控制布局內部控制元件的排列方式，屬性值有“ horizontal ”（水平）和“ vertical ”（垂直），默認為水平，

2.FrameLayout（層布局）：特點是后面的控制元件會覆寫前面的控制元件，所有控制元件初始位置默認為左上角，
函式
setOnClickListener（點擊事件監聽器）：當點擊事件觸發時，呼叫函式，

實驗程序:

第一步，設計底部和頂部的導航欄：在 app / res / layout 檔案夾里新建 xml 檔案，我命名為 bottom，打開bottom.xml檔案，在Design界面的Component內將默認布局改為線性布局，再在布局內新建4個線性布局，在4個線性布局里添加一個圖片ImageView和一個文本TextView，切換到Code界面，在4個線性布局里添加陳述句：android:orientation="vertical"，將布局內控制元件的排列方式改為垂直，
在這里插入圖片描述

布局、控制元件都有android:layout_height和android:layout_weight屬性，屬性值除了可以是具體數值外，還有wrap_content（與內容等高或等寬）和match_parent（與父組件等高或等寬）兩種，通過調整這兩個屬性值可以讓布局更工整美觀，

在這里插入圖片描述

布局可以通過設定android:background屬性改變背景顏色，文本可以通過設定android:textColor屬性改變字體顏色，

在使用Android Studio時，圖片資源一般放在 app / res / drawable 檔案夾內，注意圖片命名用英文，如果想獲得更加標準美觀的圖示，推薦阿里矢量圖示庫，在網站里可以通過關鍵詞搜索，并免費下載自定義顏色的圖示，非常好用，

在這里插入圖片描述

頂部導航欄與之同理，新建xml檔案，在線性布局中新建一個文本，最后調整布局、控制元件的大小、顏色即可，

第二步，設計表單總布局
按照老師的要求，總布局包括頂、底部導航欄和中間的文本框三部分，
打開activity_main.xml檔案，總體布局還是選擇線性布局（應該也可以直接使用層布局），再在線性布局內新建一個層布局，在層布局使用 include 陳述句呼叫頂部和底部導航欄兩個xml檔案，具體陳述句如下：

<include layout="@layout/bottom"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_gravity="bottom" />
<include layout="@layout/top" />

在第一個呼叫陳述句中，還設定了width和height，這是因為它提示不設定就無法使用layout_gravity屬性，我們用layout_gravity屬性將bottom底部導航欄放在布局的底部，再把文本設定為居中center，這樣一來，整體的設計就已經完成了，

此時，查看Design，發現因為新建專案時選擇了Empty，所以有自帶的頂部導航欄，要想禁用自帶的頂部導航欄，只要修改 app / res / values / themes 里的兩個 theme檔案或 app / res / values / style 檔案里的DarkActionBar為NoActionBar
在這里插入圖片描述

第三步，撰寫點擊事件
在MainActivity.java檔案中，首先設定對應型別的變數來宣告控制元件和布局，再設定底部導航欄四個圖片的點擊事件監聽器，在點擊事件監聽器中，命名了onClick函式來重寫事件方法，在函式中，我改變了該圖片所在布局的顏色使其與主界面顏色一致，其余三個圖片所在布局顏色還原為導航欄顏色，以實作點擊效果，同時，使用setText方法將文本內容改變，

第四步，運行

查看運行結果，如果出現報錯，檢查糾正，
在這里插入圖片描述實驗到此結束
以下是實驗代碼：

activity_main.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="match_parent"
    android:orientation="vertical">


    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/interface_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text=""
            android:textSize="40sp"/>

        <include
            layout="@layout/bottom"
            android:layout_width="match`在這里插入代碼片`_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom" />

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

</LinearLayout>

MainActity.java

package com.example.myhomework;

import androidx.appcompat.app.AppCompatActivity;

import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

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

        ImageView btn1 = findViewById(R.id.chat);
        ImageView btn2 = findViewById(R.id.news);
        ImageView btn3 = findViewById(R.id.contacts);
        ImageView btn4 = findViewById(R.id.setup);
        TextView tv1 = findViewById(R.id.interface_name);
        LinearLayout lo1 = findViewById(R.id.lo1);
        LinearLayout lo2 = findViewById(R.id.lo2);
        LinearLayout lo3 = findViewById(R.id.lo3);
        LinearLayout lo4 = findViewById(R.id.lo4);

        btn1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                tv1.setText("這是聊天界面");
                lo1.setBackgroundColor(Color.parseColor("#FFFFFFFF"));
                lo2.setBackgroundColor(Color.parseColor("#FFe6e6e6"));
                lo3.setBackgroundColor(Color.parseColor("#FFe6e6e6"));
                lo4.setBackgroundColor(Color.parseColor("#FFe6e6e6"));
            }
        });
        btn2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                tv1.setText("這是新聞界面");
                lo1.setBackgroundColor(Color.parseColor("#FFe6e6e6"));
                lo2.setBackgroundColor(Color.parseColor("#FFFFFFFF"));
                lo3.setBackgroundColor(Color.parseColor("#FFe6e6e6"));
                lo4.setBackgroundColor(Color.parseColor("#FFe6e6e6"));
            }
        });
        btn3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                tv1.setText("這是聯系人界面");
                lo1.setBackgroundColor(Color.parseColor("#FFe6e6e6"));
                lo2.setBackgroundColor(Color.parseColor("#FFe6e6e6"));
                lo3.setBackgroundColor(Color.parseColor("#FFFFFFFF"));
                lo4.setBackgroundColor(Color.parseColor("#FFe6e6e6"));
            }
        });
        btn4.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                tv1.setText("這是設定界面");
                lo1.setBackgroundColor(Color.parseColor("#FFe6e6e6"));
                lo2.setBackgroundColor(Color.parseColor("#FFe6e6e6"));
                lo3.setBackgroundColor(Color.parseColor("#FFe6e6e6"));
                lo4.setBackgroundColor(Color.parseColor("#FFFFFFFF"));
            }
        });

    }
}

bottom.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="90dp"
    android:background="@color/little_grey">

    <LinearLayout
        android:id="@+id/lo1"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/chat"
            android:layout_width="40dp"
            android:layout_height="60dp"
            android:layout_weight="1"
            android:src="@drawable/icon_chat" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="@string/chat"
            android:textColor="@color/deep_grey"
            android:textStyle="bold" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/lo2"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/news"
            android:layout_width="40dp"
            android:layout_height="60dp"
            android:layout_weight="1"
            android:src="@drawable/icon_news" />

        <TextView
            android:id="@+id/textView5"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="@string/news"
            android:textColor="@color/deep_grey"
            android:textStyle="bold" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/lo3"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/contacts"
            android:layout_width="43dp"
            android:layout_height="60dp"
            android:layout_weight="1"
            android:src="@drawable/icon_contacts" />

        <TextView
            android:id="@+id/textView6"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="@string/contacts"
            android:textColor="@color/deep_grey"
            android:textStyle="bold" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/lo4"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/setup"
            android:layout_width="45dp"
            android:layout_height="60dp"
            android:layout_weight="1"
            android:src="@drawable/icon_setup" />

        <TextView
            android:id="@+id/textView7"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="@string/setup"
            android:textColor="@color/deep_grey"
            android:textStyle="bold"/>
    </LinearLayout>
</LinearLayout>

top.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:background="@color/little_grey">

    <LinearLayout
        android:layout_width="80dp"
        android:layout_height="match_parent"
        android:layout_gravity="end"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_width="40dp"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/search"
                android:layout_width="30dp"
                android:layout_height="wrap_content"
                android:src="@drawable/icon_search" />
        </LinearLayout>

        <ImageView
            android:id="@+id/more"
            android:layout_width="30dp"
            android:layout_height="wrap_content"
            android:layout_gravity="end"
            android:src="@drawable/icon_more" />
    </LinearLayout>

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="@string/wechat"
        android:textColor="@color/deep_grey"
        android:textSize="25dp"
        android:textStyle="bold" />


</FrameLayout>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/304569.html

標籤：其他

上一篇：NDK編譯FFMPEG庫及MeadiaCodec等庫出現的各種問題

下一篇：江蘇省C語言二級備考(6/20)