目錄
一、頁面布局
二、代碼實作
三、運行界面
一、頁面布局
第一步：除去自帶的activity_main.xml檔案之外，還需另外創建兩個xml檔案，分別是top.xml和bottom.xml.
top.xml（頂部布局）
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/teal_200">
<TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="lsy的應用"
android:textColor="@color/black"
android:textSize="30sp" />
</LinearLayout>bottom.xml（底部布局）
四個linearlayout（線性布局）中均包含一個textview和一個imageview，
<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:background="@color/teal_200"
>
<LinearLayout
android:id="@+id/linearlayout_1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/p1" />
<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="微信"
android:textSize="24sp"
android:textColor="@color/black"/>
</LinearLayout>
<LinearLayout
android:id="@+id/linearlayout_2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical"
>
<ImageView
android:id="@+id/imageView2"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/p2" />
<TextView
android:id="@+id/textView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="聯系人"
android:textColor="@color/black"
android:textSize="24sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/linearlayout_3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical"
>
<ImageView
android:id="@+id/imageView3"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/p3" />
<TextView
android:id="@+id/textView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="新聞"
android:textColor="@color/black"
android:textSize="24sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/linearlayout_4"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical"
>
<ImageView
android:id="@+id/imageView4"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/p4" />
<TextView
android:id="@+id/textView4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="設定"
android:textColor="@color/black"
android:textSize="24sp" />
</LinearLayout>
</LinearLayout>activity_main.xml（主界面布局）
匯入頂部布局和底部布局，中間界面使用Framlayout（幀布局：所有放在布局里的控制元件，都按照層次堆疊在螢屏的左上角，后加進來的控制元件覆寫前面的控制元件，）
<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"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
</FrameLayout>
<include
layout="@layout/bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>第二步：創建切換時四個界面的xml檔案，如圖，代碼只展示config界面，其他三個與此類似，
<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=".WeChatFragment">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="這是微信設定界面"
android:textSize="50sp"
android:gravity="center"/>
</LinearLayout>二、代碼實作
主要實作的功能有：
1.監聽到點擊時切換fragment內容
2.監聽到點擊時改變底部被點擊的按鈕的顏色
第一步：需要生成四個fragment檔案：在as中選擇創建fragment檔案，生成后更改oncreateview函式中的頁面id即可將頁面內容放進類中，
如圖：
第二步：java代碼實作功能，
import androidx.appcompat.app.AppCompatActivity;
import android.app.Fragment;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.LinearLayout;
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private Fragment WeChatFragment = new WeChatFragment();
private Fragment frirndFragment = new frirndFragment();
private Fragment configFragment = new configFragment();
private Fragment contastFragment = new contastFragment();
private FragmentManager fragmentManager;
private LinearLayout linearlayout_1, linearlayout_2, linearlayout_3, linearlayout_4;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
linearlayout_1 = findViewById(R.id.linearlayout_1);
linearlayout_2 = findViewById(R.id.linearlayout_2);
linearlayout_3 = findViewById(R.id.linearlayout_3);
linearlayout_4 = findViewById(R.id.linearlayout_4);
linearlayout_1.setOnClickListener(this);
linearlayout_2.setOnClickListener(this);
linearlayout_3.setOnClickListener(this);
linearlayout_4.setOnClickListener(this);
initfragment();
}
private void initfragment() {
fragmentManager = getFragmentManager();
FragmentTransaction transaction = fragmentManager.beginTransaction();
transaction.add(R.id.content, WeChatFragment);
transaction.add(R.id.content, frirndFragment);
transaction.add(R.id.content, contastFragment);
transaction.add(R.id.content, configFragment);
transaction.commit();
}
private void hidefragment(FragmentTransaction transaction) {
transaction.hide(WeChatFragment);
transaction.hide(frirndFragment);
transaction.hide(contastFragment);
transaction.hide(configFragment);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.linearlayout_1:
showfragment(0);
break;
case R.id.linearlayout_2:
showfragment(1);
break;
case R.id.linearlayout_3:
showfragment(2);
break;
case R.id.linearlayout_4:
showfragment(3);
break;
default:
break;
}
}
private void showfragment(int i) {
FragmentTransaction transaction = fragmentManager.beginTransaction();
hidefragment(transaction);
switch (i) {
case 0:
transaction.show(WeChatFragment);
linearlayout_1.setBackgroundColor(Color.parseColor("#F5F5DC"));
linearlayout_2.setBackgroundColor(Color.parseColor("#FF03DAC5"));
linearlayout_3.setBackgroundColor(Color.parseColor("#FF03DAC5"));
linearlayout_4.setBackgroundColor(Color.parseColor("#FF03DAC5"));
break;
case 1:
transaction.show(frirndFragment);
linearlayout_2.setBackgroundColor(Color.parseColor("#F5F5DC"));
linearlayout_1.setBackgroundColor(Color.parseColor("#FF03DAC5"));
linearlayout_3.setBackgroundColor(Color.parseColor("#FF03DAC5"));
linearlayout_4.setBackgroundColor(Color.parseColor("#FF03DAC5"));
break;
case 2:
transaction.show(contastFragment);
linearlayout_3.setBackgroundColor(Color.parseColor("#F5F5DC"));
linearlayout_1.setBackgroundColor(Color.parseColor("#FF03DAC5"));
linearlayout_2.setBackgroundColor(Color.parseColor("#FF03DAC5"));
linearlayout_4.setBackgroundColor(Color.parseColor("#FF03DAC5"));
break;
case 3:
transaction.show(configFragment);
linearlayout_4.setBackgroundColor(Color.parseColor("#F5F5DC"));
linearlayout_1.setBackgroundColor(Color.parseColor("#FF03DAC5"));
linearlayout_3.setBackgroundColor(Color.parseColor("#FF03DAC5"));
linearlayout_2.setBackgroundColor(Color.parseColor("#FF03DAC5"));
break;
default:
break;
}
transaction.commit();
}
}
三、運行界面
代碼庫：https://github.com/barley12345/mywork
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/306454.html
標籤：其他
下一篇：Android學習記錄