AndroidStudio實(shí)現(xiàn)微信界面設(shè)計(jì)
一、內(nèi)容
實(shí)操實(shí)現(xiàn)APP門戶界面框架設(shè)計(jì),至少包含4個tab頁,能實(shí)現(xiàn)tab頁之間的點(diǎn)擊切換
二、技術(shù)
使用布局(layouts)和分段(fragment),對控件進(jìn)行點(diǎn)擊監(jiān)聽
三、xml代碼
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="55dp" android:background="@color/black"> <TextView android:id="@+id/textView5" android:layout_width="wrap_content" android:layout_height="55dp" android:layout_weight="1" android:gravity="center" android:text="應(yīng)用" android:textColor="@color/white" android:textSize="30sp" /> </LinearLayout>
界面居中上方寫標(biāo)題,背景是黑色,字體是白色
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:background="@color/black" > <LinearLayout android:id="@+id/linearLayout1" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:orientation="vertical"> <ImageView android:id="@+id/imageView2" android:layout_width="30dp" android:layout_height="30dp" android:src="@drawable/p1" /> <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="24sp" /> </LinearLayout> <LinearLayout android:id="@+id/linearLayout2" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:orientation="vertical"> <ImageView android:id="@+id/imageView3" android:layout_width="30dp" android:layout_height="30dp" android:src="@drawable/p2" /> <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="24sp" /> </LinearLayout> <LinearLayout android:id="@+id/linearLayout3" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:orientation="vertical"> <ImageView android:id="@+id/imageView4" android:layout_width="30dp" android:layout_height="30dp" android:src="@drawable/p3" /> <TextView android:id="@+id/textView4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:text="發(fā)現(xiàn)" android:textColor="@color/white" android:textSize="24sp" /> </LinearLayout> <LinearLayout android:id="@+id/linearLayout4" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:orientation="vertical"> <ImageView android:id="@+id/imageView" android:layout_width="30dp" android:layout_height="30dp" android:src="@drawable/p4" /> <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="24sp" /> </LinearLayout> </LinearLayout>
界面下方分成四個模板,由圖片和文字組成,正在使用的界面圖標(biāo)為綠色,不在使用的界面圖標(biāo)為黑色
fragment_config.xml/fragment_wechat/fragment_friend/fragment_contact
<?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=".Fragment_config"> <!-- TODO: Update blank fragment layout --> <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:text="這是微信聊天界面" android:textSize="35sp" /> </LinearLayout>
顯示界面中間內(nèi)容
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" android:layout_width="match_parent" android:layout_height="wrap_content" /> <FrameLayout android:id="@+id/id_content" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"> </FrameLayout> <include layout="@layout/bottom" android:gravity="bottom" /> </LinearLayout>
將top.xml和bottom.xml放在一個界面中
四、Java代碼
MainActivity.java
package com.example.cyxapp; 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.widget.LinearLayout; public class MainActivity extends AppCompatActivity implements View.OnClickListener{ private Fragment Fragment_config=new Fragment_config(); private Fragment Fragment_contact=new Fragment_contact(); private Fragment Fragment_wechat=new Fragment_wechat(); private Fragment Fragment_friend=new Fragment_friend(); private FragmentManager fragmentManager; private LinearLayout linearLayout1,linearLayout2,linearLayout3,linearLayout4; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); linearLayout1=findViewById(R.id.linearLayout1); linearLayout2=findViewById(R.id.linearLayout2); linearLayout3=findViewById(R.id.linearLayout3); linearLayout4=findViewById(R.id.linearLayout4); linearLayout1.setOnClickListener(this); linearLayout2.setOnClickListener(this); linearLayout3.setOnClickListener(this); linearLayout4.setOnClickListener(this); initFragment(); } private void initFragment(){ fragmentManager=getFragmentManager(); FragmentTransaction transaction=fragmentManager.beginTransaction(); transaction.add(R.id.id_content,Fragment_wechat); transaction.add(R.id.id_content,Fragment_contact); transaction.add(R.id.id_content,Fragment_config); transaction.add(R.id.id_content,Fragment_friend); transaction.commit(); } private void hideFragment(FragmentTransaction transaction){ transaction.hide(Fragment_wechat); transaction.hide(Fragment_contact); transaction.hide(Fragment_config); transaction.hide(Fragment_friend); } private void background(View v) { switch (v.getId()) { case R.id.linearLayout1: linearLayout1.setBackgroundColor(Color.parseColor("#426F42")); break; case R.id.linearLayout2: linearLayout2.setBackgroundColor(Color.parseColor("#426F42")); break; case R.id.linearLayout3: linearLayout3.setBackgroundColor(Color.parseColor("#426F42")); break; case R.id.linearLayout4: linearLayout4.setBackgroundColor(Color.parseColor("#426F42")); break; default: break; } } private void backgroundreturn(View v) { switch (v.getId()) { case R.id.linearLayout1: linearLayout1.setBackgroundColor(Color.parseColor("#000000")); break; case R.id.linearLayout2: linearLayout2.setBackgroundColor(Color.parseColor("#000000")); break; case R.id.linearLayout3: linearLayout3.setBackgroundColor(Color.parseColor("#000000")); break; case R.id.linearLayout4: linearLayout4.setBackgroundColor(Color.parseColor("#000000")); break; default: break; } } private void showfragmnet(int i) { FragmentTransaction transaction=fragmentManager.beginTransaction(); hideFragment(transaction); switch (i){ case 0: transaction.show(Fragment_wechat); background(linearLayout1); backgroundreturn(linearLayout3); backgroundreturn(linearLayout2); backgroundreturn(linearLayout4); break; case 1: transaction.show(Fragment_friend); background(linearLayout2); backgroundreturn(linearLayout4); backgroundreturn(linearLayout1); backgroundreturn(linearLayout3); break; case 2: transaction.show(Fragment_contact); background(linearLayout3); backgroundreturn(linearLayout4); backgroundreturn(linearLayout2); backgroundreturn(linearLayout1); break; case 3: transaction.show(Fragment_config); background(linearLayout4); backgroundreturn(linearLayout1); backgroundreturn(linearLayout2); backgroundreturn(linearLayout3); break; default: break; } transaction.commit(); } @Override public void onClick(View v) { switch (v.getId()){ case R.id.linearLayout1: showfragmnet(0); break; case R.id.linearLayout2: showfragmnet(1); break; case R.id.linearLayout3: showfragmnet(2); break; case R.id.linearLayout4: showfragmnet(3); break; default: break; } } }
initFragment函數(shù)中利用transaction來實(shí)現(xiàn)fragment的切換
hideFragment把沒有使用的界面的fragment的內(nèi)容隱藏起來
background使圖標(biāo)點(diǎn)擊后變綠色
backgroundreturn讓圖標(biāo)恢復(fù)黑色
showfragmnet顯示正在使用界面的fragment的內(nèi)容
onClick監(jiān)聽函數(shù),監(jiān)聽到底是哪一個圖標(biāo)被擊中從而顯示哪一個界面的內(nèi)容
Fragment_config.java
package com.example.cyxapp; import android.app.Fragment; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class Fragment_config extends Fragment { public Fragment_config() { // 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_config, container, false); } }
Fragment_contact、Fragment_friend、Fragment_wechat類似
五、界面展示
代碼倉庫地址:cccyuxuan/cyxApp1 (github.com)
到此這篇關(guān)于AndroidStudio實(shí)現(xiàn)微信界面設(shè)計(jì)的文章就介紹到這了,更多相關(guān)AndroidStudio 微信 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Android開發(fā)之圖形圖像與動畫(四)AnimationListener簡介
就像Button控件有監(jiān)聽器一樣,動畫效果也有監(jiān)聽器,只需要實(shí)現(xiàn)AnimationListener就可以實(shí)現(xiàn)對動畫效果的監(jiān)聽,感興趣的朋友可以了解下啊,希望本文對你有所幫助2013-01-01Android游戲開發(fā) 自定義手勢--輸入法手勢技術(shù)
本文主要介紹 Android游戲開發(fā)中自定義手勢--輸入法手勢技術(shù),這里提供了實(shí)現(xiàn)效果圖以及示例代碼,有開發(fā)手機(jī)游戲的朋友可以參考下2016-08-08使用android studio開發(fā)工具編譯GBK轉(zhuǎn)換三方庫iconv的方法
這篇文章主要介紹了使用android studio開發(fā)工具編譯GBK轉(zhuǎn)換三方庫iconv的教程,本文通過圖文并茂的形式給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06Android Intent傳遞數(shù)據(jù)底層分析詳細(xì)介紹
這篇文章主要介紹了Android Intent傳遞數(shù)據(jù)底層分析詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2017-02-02Flutter?fluro時(shí)報(bào)錯type?'String'?is?not?a?subty
這篇文章主要介紹了Flutter使用fluro時(shí)報(bào)錯type?'String'?is?not?a?subtype?of?type?'Queue<Task>'解決方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助2023-12-12Android利用代碼控制設(shè)備上其他音樂播放器的方法
這篇文章主要給大家介紹了關(guān)于Android利用代碼如何控制設(shè)備上其他音樂播放器的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-06-06Android中程序的停止?fàn)顟B(tài)詳細(xì)介紹
這篇文章主要介紹了Android中程序的停止?fàn)顟B(tài)詳細(xì)介紹,本文講解了什么是程序的停止?fàn)顟B(tài)、為什么Android要引入這一狀態(tài)、激活狀態(tài)和停止?fàn)顟B(tài)的切換、如何變?yōu)橥V範(fàn)顟B(tài)等內(nèi)容,需要的朋友可以參考下2015-01-01Flutter 枚舉值enum和int互相轉(zhuǎn)化總結(jié)
這篇文章主要為大家介紹了Flutter 枚舉值enum和int互相轉(zhuǎn)化總結(jié)分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02