安卓開(kāi)發(fā)之類微信界面

• • 微信主界面：實(shí)現(xiàn)點(diǎn)擊按鈕切換不同界面
  • • 【頂部設(shè)計(jì)】
    • 【底部設(shè)計(jì)】
    • 【中部設(shè)計(jì)】
    • 【設(shè)置點(diǎn)擊按扭時(shí)不同界面的顯示】
    • 【編寫MainActivity.java】

微信主界面：實(shí)現(xiàn)點(diǎn)擊按鈕切換不同界面

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

首先在androidstudio中新建一個(gè)項(xiàng)目，選擇empty activity,等待項(xiàng)目構(gòu)建完成，一個(gè)微信類聊天界面主要分為頭部標(biāo)題名稱，中間顯示內(nèi)容，底部布局按鈕切換界面這三個(gè)部分

【頂部設(shè)計(jì)】

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

設(shè)置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" />

【底部設(shè)計(jì)】

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

<?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="聯(lián)系人"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="設(shè)置"android:textSize="15sp" /> </LinearLayout>

在res文件夾下的drawable文件夾中準(zhǔn)備一些設(shè)計(jì)圖標(biāo)的圖片
效果：

【中部設(shè)計(jì)】

新建四個(gè)xml文件，這四個(gè)文件就是切換不同界面時(shí)要顯示的內(nèi)容，

往其中添加textview控件

設(shè)置布局屬性

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

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

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

頭部與尾部的布局我們已經(jīng)設(shè)置好，直接使用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>
顯示效果：

到這里布局就基本結(jié)束了

【設(shè)置點(diǎn)擊按扭時(shí)不同界面的顯示】

上面我們已經(jīng)設(shè)置了頁(yè)面的布局，但是卻沒(méi)有實(shí)現(xiàn)點(diǎn)擊按鈕頁(yè)面就切換的效果，接下來(lái)我們打開(kāi)MainActivity.java這個(gè)文件進(jìn)行代碼編寫
首先我們要給中部的framelayout控件壓入四個(gè)布局文件，在java文件夾新建四個(gè)blank類型的fragment文件，

在四個(gè)fragment文件中將要實(shí)例化的布局文件轉(zhuǎn)換成我們已經(jīng)編寫好的四個(gè)布局文件，改變其中的參數(shù)

為什么要這么做呢？因?yàn)槲覀兪菬o(wú)法直接操作xml文件的，這樣做相當(dāng)于把這四個(gè)布局文件進(jìn)行實(shí)例化我們可以直接對(duì)這四個(gè)文件執(zhí)行操作，比如將他們?cè)谔囟ǖ臅r(shí)候進(jìn)行顯示或隱藏等操作

【編寫MainActivity.java】

編寫MainActivity.java文件
編寫函數(shù)將四個(gè)界面添加到fragment中，

public class MainActivity extends AppCompatActivity implements View.OnClickListener {private Fragment fragment1= new weixinFragment();//分別將四個(gè)fragment類實(shí)例化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;//將四個(gè)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();}

編寫初始化控件函數(shù)

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);}

編寫相應(yīng)監(jiān)聽(tīng)事件，就是當(dāng)我們點(diǎn)擊不同按鈕是顯示不同的界面，給事件綁定相應(yīng)函數(shù)

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

編寫一個(gè)當(dāng)點(diǎn)擊不同按鈕時(shí)展示不同界面的函數(shù)

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();}

設(shè)置按鈕圖片

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);}

整個(gè)代碼：

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();}

源碼：
項(xiàng)目源碼

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。