Wechat interface layout

Use Android Studio to create a project similar to wechat interface layout

It can be roughly divided into the following aspects

Top interface

The buttom interface

Interface between

The main interface

MainActivity

Top Layout

` `

<? The 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:background="@color/black" android:layout_height="70dp"> <TextView android:id="@+id/textView5" android:layout_width="match_parent" android:layout_height="70dp" android:layout_weight="1" android:gravity="center" android:text="MyWechat" android:textColor="#ffffff" android:textSize="34sp" /> </LinearLayout>Copy the code

Here is to adjust the format and background color of the top part, and adjust the text size to complete the production of the upper half of the page

Buttom interface layout

<? The 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="70dp" android:layout_gravity="bottom" android:background="@color/black"> <LinearLayout android:layout_width="wrap_content" android:layout_height="match_parent" android:orientation="vertical"> <ImageView android:id="@+id/imageView1" android:layout_width="100dp" android:layout_height="wrap_content" app:srcCompat="@android:drawable/ic_dialog_email" /> <TextView android:id="@+id/textView1" android:layout_width="match_parent" android:layout_height="wrap_content" Android :gravity="center" Android :text=" wechat "Android :textColor="@color/white" Android :textSize="30sp" /> </LinearLayout> <LinearLayout android:layout_width="wrap_content" android:layout_height="match_parent" android:orientation="vertical"> <ImageView android:id="@+id/imageView2" android:layout_width="100dp" android:layout_height="wrap_content" tools:srcCompat="@android:drawable/ic_dialog_email" /> <TextView android:id="@+id/textView2" Android :layout_width="match_parent" Android :layout_height="wrap_content" Android :gravity="center" android:textColor="@color/white" android:textSize="30sp" /> </LinearLayout> <LinearLayout android:layout_width="wrap_content" android:layout_height="match_parent" android:orientation="vertical"> <ImageView android:id="@+id/imageView3" android:layout_width="100dp" android:layout_height="wrap_content" app:srcCompat="@android:drawable/ic_menu_call" tools:srcCompat="@android:drawable/ic_menu_call" /> <TextView android:id="@+id/textView3" android:layout_width="match_parent" android:layout_height="wrap_content" Android :gravity="center" Android :text=" contact "Android :textColor="@color/white" Android :textSize=" 30SP" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <ImageView android:id="@+id/imageView4" android:layout_width="match_parent" android:layout_height="wrap_content" app:srcCompat="@android:drawable/ic_dialog_email" tools:srcCompat="@android:drawable/ic_menu_camera" /> <TextView android:id="@+id/textView4" android:layout_width="match_parent" android:layout_height="wrap_content" Android :gravity="center" Android :text=" setup "Android :textColor="@color/white" Android :textSize=" 30SP" /> </LinearLayout> </LinearLayout>Copy the code

Buttom interface involves more controls, to adjust the position and layout of LinearLayout, TextView and ImageView, become the lower half of the wechat interface

The main interface

Combine the top and ButTom interfaces

The following code

<? The 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="wrap_content" android:layout_weight="1"> </FrameLayout> <include layout="@layout/bottom" /> </LinearLayout>Copy the code

Here we call the top and ButTom interfaces with include, with the FramLayout control in the middle

Interface between

You need four intermediate interfaces, and this is one of them

<? The 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"> android:gravity="center" android:orientation="horizontal"> <TextView android:id="@+id/textView7" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_weight="1" android:gravity="center" Android :text=" 25sp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> android:text="TextView" /> </androidx.constraintlayout.widget.ConstraintLayout>Copy the code

Similarly, there are three tabs with Settings and so on.

The rest of the show

MainActivity

InitFragment () // Switch to the fragment

Selectfragment () // Displays the contents of the selected interface. The icon on the selected interface is green

HideFragment () // Hide the contents of unused interfaces

OnClick () // listens for which icon is hit to display the content of which interface

See the project repository code for details

There is a problem with my listener function, I cannot switch the following ICONS correctly

Code repository: [gitee.com/zhan-zhan/a…]