Android开发之类微信界面设计

类微信界面的开发

本文以一个案例的形式，介绍了如何使用Android Studio软件来进行Android 开发。

开发环境：Android Studio

开发步骤

• 1.编写布局文件

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

    <TextView
        android:id="@+id/textView5"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="这是微信聊天界面"
        android:textSize="30sp"
        android:textStyle="bold"/>

</LinearLayout>
var foo = 'bar';

• 效果
  

• 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"
    android:layout_width="match_parent"
    android:layout_height="70dp"
    android:background="@drawable/bottom_bar"
    android:baselineAligned="false"
    android:orientation="horizontal">

    <LinearLayout
        android:id="@+id/tab_weixin"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/imageButton1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#000000"
            android:clickable="false"
            app:srcCompat="@drawable/tab_weixin_pressed" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:clickable="false"
            android:text="微信"
            android:textColor="#ffffff"
            android:textSize="20dp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/tab_frd"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/imageButton2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#000000"
            android:clickable="false"
            app:srcCompat="@drawable/tab_find_frd_pressed" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:clickable="false"
            android:text="朋友"
            android:textColor="#ffffff"
            android:textSize="20dp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/tab_contact"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/imageButton3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#000000"
            android:clickable="false"
            app:srcCompat="@drawable/tab_address_pressed" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:clickable="false"
            android:text="通讯录"
            android:textColor="#ffffff"
            android:textSize="20dp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/tab_setting"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/imageButton4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#000000"
            android:clickable="false"
            app:srcCompat="@drawable/tab_settings_pressed" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:clickable="false"
            android:text="设置"
            android:textColor="#ffffff"
            android:textSize="20dp" />
    </LinearLayout>
</LinearLayout>

• 效果
  

• 2.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">

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

    <FrameLayout
        android:id="@+id/id_content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

    </FrameLayout>

    <include layout="@layout/bottom" />
</LinearLayout>

• 效果
  

• 3.编写4个中间部分的切换页面：消息、好友、通讯录、设置界面（以tab01.xml为例）

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

<TextView
    android:id="@+id/textView5"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:text="这是微信聊天界面"
    android:textSize="30sp"
    android:textStyle="bold"/>

• 效果
  

2.编写java文件。在java文件中编写button的点击触发事件，用于实现不同页面之间的切换和图片之间的变换。（以selectFragment代码片段为例）

private void selectFragment(int i){                                           
    FragmentTransaction transaction = fm.beginTransaction();                  
    hideFragment(transaction);                                                
    switch(i){                                                                
        case 0:                                                               
            transaction.show(mTab01);                                         
            mImgWeixin.setImageResource(R.drawable.tab_weixin_pressed);       
            break;                                                            
        case 1:                                                               
             transaction.show(mTab02);                                        
             mImgFrd.setImageResource(R.drawable.tab_find_frd_pressed);       
             break;                                                           
        case 2:                                                               
             transaction.show(mTab03);                                        
             mImgAddress.setImageResource(R.drawable.tab_address_pressed);    
             break;                                                           
        case 3:                                                               
             transaction.show(mTab04);                                        
             mImgSettings.setImageResource(R.drawable.tab_settings_pressed);  
             break;                                                           
        default:                                                              
            break;                                                            
    }                                                                         
    transaction.commit();                                                     
}                                                                             

• 最终效果

编码于此就完成了。