安卓開發之類微信界面

• • 微信主界面：實現點擊按鈕切換不同界面
  • • 【頂部設計】
    • 【底部設計】
    • 【中部設計】
    • 【設置點擊按扭時不同界面的顯示】
    • 【編寫MainActivity.java】

微信主界面：實現點擊按鈕切換不同界面

1.采用整體linearlayout的整體布局
2.頭部采用linearlayout布局，內含textview控件
3.中部顯示主界面采用fremwork布局
4.底部采用linearlayout設計，內含imgbutton、textview等控件

首先在androidstudio中新建一個項目，選擇empty activity,等待項目構建完成，一個微信類聊天界面主要分為頭部標題名稱，中間顯示內容，底部布局按鈕切換界面這三個部分

【頂部設計】

在layout文件夾新建一個top.xml文件，將textview控件拖入其中，

設置linearlayout布局以及textview控件屬性

<?xml version="1.0" encoding="utf-8"?>

<TextViewandroid:id="@+id/textView"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:text="@string/app_name"android:textColor="#ffffff"android:textSize="20sp" />

【底部設計】

新建一個buttom.xml文件，將布局文件orientation屬性設置為horizontal即水平的，在布局文件中添加四個linearlayout布局控件將orientation屬性設置為vertical，并在四個linearlayout分別添加ImgButton和TextView控件，并設置相關屬性

<?xml version="1.0" encoding="utf-8"?>

<LinearLayoutandroid:id="@+id/id_weixin"android:layout_width="0dp"android:layout_height="match_parent"android:gravity="center"android:layout_weight="1"android:orientation="vertical"><ImageButtonandroid:id="@+id/img_weixin"android:layout_width="match_parent"android:layout_height="60dp"android:contentDescription="@string/app_name"tools:srcCompat="@drawable/tab_weixin_normal" /><TextViewandroid:id="@+id/textView1"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center_horizontal"android:text="微信"android:textSize="15sp" /> </LinearLayout><LinearLayoutandroid:id="@+id/id_firends"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:orientation="vertical"><ImageButtonandroid:id="@+id/img_friends"android:layout_width="match_parent"android:layout_height="60dp"android:contentDescription="@string/app_name"tools:srcCompat="@drawable/normal1" /><TextViewandroid:id="@+id/textView2"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center_horizontal"android:text="朋友"android:textSize="15sp" /> </LinearLayout><LinearLayoutandroid:id="@+id/id_link"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:orientation="vertical"><ImageButtonandroid:id="@+id/img_link"android:layout_width="match_parent"android:layout_height="60dp"android:contentDescription="@string/app_name"tools:srcCompat="@drawable/normal2" /><TextViewandroid:id="@+id/textView3"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center_horizontal"android:text="聯系人"android:textSize="15sp" /> </LinearLayout><LinearLayoutandroid:id="@+id/id_set"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:orientation="vertical"><ImageButtonandroid:id="@+id/img_set"android:layout_width="match_parent"android:layout_height="60dp"android:contentDescription="@string/app_name"tools:srcCompat="@drawable/normal3" /><TextViewandroid:id="@+id/textView4"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center_horizontal"android:text="設置"android:textSize="15sp" /> </LinearLayout>

在res文件夾下的drawable文件夾中準備一些設計圖標的圖片
效果：

【中部設計】

新建四個xml文件，這四個文件就是切換不同界面時要顯示的內容，

往其中添加textview控件

設置布局屬性

<?xml version="1.0" encoding="utf-8"?>

<TextViewandroid:id="@+id/textView6"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:text="這是朋友圈界面"android:textSize="25sp" />

啟動界面即activity_main.xml文件設置
主界面布局文件的設置，在這里我們要設置好剛剛設置好的三個部分的xml文件將頭部，底部，中部組合成一個完整的界面，首先往其中添加一個framelayout布局，這個是用于存放中部四個不同的界面的xml文件，因為頭部和下面的按鈕布局一般是不變的，點擊按鈕變換的主要是中間這部分的顯示內容然后在文件中引入頭部布局文件與下部的點擊切換布局文件

設置frameLayout控件屬性使布局合理顯示并設置id：

頭部與尾部的布局我們已經設置好，直接使用include分別在framelayout上面與下面引入即可

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout 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”
tools:context=".MainActivity">

<LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><include layout="@layout/top" /><FrameLayoutandroid:id="@+id/id_fragment"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"android:background="@drawable/singht"></FrameLayout><include layout="@layout/buttom" /> </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>
顯示效果：

到這里布局就基本結束了

【設置點擊按扭時不同界面的顯示】

上面我們已經設置了頁面的布局，但是卻沒有實現點擊按鈕頁面就切換的效果，接下來我們打開MainActivity.java這個文件進行代碼編寫
首先我們要給中部的framelayout控件壓入四個布局文件，在java文件夾新建四個blank類型的fragment文件，

在四個fragment文件中將要實例化的布局文件轉換成我們已經編寫好的四個布局文件，改變其中的參數

為什么要這么做呢？因為我們是無法直接操作xml文件的，這樣做相當于把這四個布局文件進行實例化我們可以直接對這四個文件執行操作，比如將他們在特定的時候進行顯示或隱藏等操作

【編寫MainActivity.java】

編寫MainActivity.java文件
編寫函數將四個界面添加到fragment中，

public class MainActivity extends AppCompatActivity implements View.OnClickListener {private Fragment fragment1= new weixinFragment();//分別將四個fragment類實例化private Fragment fragment2=new friendsFragment();private Fragment fragment3= new linklistFragment();private Fragment fragment4= new settingFragment();private FragmentManager fm;//聲明控件private LinearLayout mweixin;private LinearLayout mfriends;private LinearLayout mlinklist;private LinearLayout msetting;private ImageButton first1;private ImageButton first2;private ImageButton first3;private ImageButton first4;//將四個fragment添加至framework組件中public void initFragment(){fm = getFragmentManager();FragmentTransaction transaction=fm.beginTransaction();transaction.add(R.id.id_fragment,fragment1);transaction.add(R.id.id_fragment,fragment2);transaction.add(R.id.id_fragment,fragment3);transaction.add(R.id.id_fragment,fragment4);transaction.commit();}

編寫初始化控件函數

public void initView(){mweixin=(LinearLayout) findViewById(R.id.id_weixin);mfriends=(LinearLayout) findViewById(R.id.id_firends);mlinklist=(LinearLayout) findViewById(R.id.id_link);msetting=(LinearLayout) findViewById(R.id.id_set);first1=(ImageButton)findViewById(R.id.img_weixin);first2=(ImageButton)findViewById(R.id.img_friends);first3=(ImageButton)findViewById(R.id.img_link);first4=(ImageButton)findViewById(R.id.img_set);}

編寫相應監聽事件，就是當我們點擊不同按鈕是顯示不同的界面，給事件綁定相應函數

public void initEvent(){first1.setOnClickListener(this);first2.setOnClickListener(this);first3.setOnClickListener(this);first4.setOnClickListener(this);//msetting.setOnClickListener(this);}

編寫一個當點擊不同按鈕時展示不同界面的函數

public void selectFragment(int i){FragmentTransaction transaction=fm.beginTransaction();hideFragment(transaction);resetimg();switch (i){case 0:transaction.show(fragment1);first1.setImageResource(R.drawable.tab_weixin_pressed);break;case 1:transaction.show(fragment2);first2.setImageResource(R.drawable.press1);break;case 2:transaction.show(fragment3);first3.setImageResource(R.drawable.press2);break;case 3:transaction.show(fragment4);first4.setImageResource(R.drawable.press3);break;default:break;}transaction.commit();}

設置按鈕圖片

public void resetimg(){first1.setImageResource(R.drawable.tab_weixin_normal);first2.setImageResource(R.drawable.normal1);first3.setImageResource(R.drawable.normal2);first4.setImageResource(R.drawable.normal3);}

整個代碼：

package com.example.mywechat;import androidx.appcompat.app.AppCompatActivity; import android.app.Fragment;import android.app.FragmentManager; import android.app.FragmentTransaction; import android.view.SurfaceControl; import android.view.View; import android.view.Window;import android.os.Bundle; import android.widget.Button; import android.widget.ImageButton; import android.widget.LinearLayout;public class MainActivity extends AppCompatActivity implements View.OnClickListener {private Fragment fragment1= new weixinFragment();private Fragment fragment2=new friendsFragment();private Fragment fragment3= new linklistFragment();private Fragment fragment4= new settingFragment();private FragmentManager fm;private LinearLayout mweixin;private LinearLayout mfriends;private LinearLayout mlinklist;private LinearLayout msetting;private ImageButton first1;private ImageButton first2;private ImageButton first3;private ImageButton first4;public void initView(){mweixin=(LinearLayout) findViewById(R.id.id_weixin);mfriends=(LinearLayout) findViewById(R.id.id_firends);mlinklist=(LinearLayout) findViewById(R.id.id_link);msetting=(LinearLayout) findViewById(R.id.id_set);first1=(ImageButton)findViewById(R.id.img_weixin);first2=(ImageButton)findViewById(R.id.img_friends);first3=(ImageButton)findViewById(R.id.img_link);first4=(ImageButton)findViewById(R.id.img_set);}public void initFragment(){fm = getFragmentManager();FragmentTransaction transaction=fm.beginTransaction();transaction.add(R.id.id_fragment,fragment1);transaction.add(R.id.id_fragment,fragment2);transaction.add(R.id.id_fragment,fragment3);transaction.add(R.id.id_fragment,fragment4);transaction.commit();}public void hideFragment(FragmentTransaction transaction){transaction.hide(fragment1);transaction.hide(fragment2);transaction.hide(fragment3);transaction.hide(fragment4);}public void resetimg(){first1.setImageResource(R.drawable.tab_weixin_normal);first2.setImageResource(R.drawable.normal1);first3.setImageResource(R.drawable.normal2);first4.setImageResource(R.drawable.normal3);}public void selectFragment(int i){FragmentTransaction transaction=fm.beginTransaction();hideFragment(transaction);resetimg();switch (i){case 0:transaction.show(fragment1);first1.setImageResource(R.drawable.tab_weixin_pressed);break;case 1:transaction.show(fragment2);first2.setImageResource(R.drawable.press1);break;case 2:transaction.show(fragment3);first3.setImageResource(R.drawable.press2);break;case 3:transaction.show(fragment4);first4.setImageResource(R.drawable.press3);break;default:break;}transaction.commit();}

源碼：
項目源碼

總結

以上是生活随笔為你收集整理的安卓之软件界面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。