1, Functional requirements
Complete a layout similar to wechat page, which requires:
- At the top of the page is the title centered
- The content is displayed in the middle interface of the page, and the content is switched with the selection in the lower column
- There are four buttons at the bottom of the page
- After clicking the button, the button icon will change color and the change content of the display box will be displayed
2, Page layout settings
1. top.xml layout
Create a layout file top.xml, add a text box, add text, set it to center, and modify the text color and LinearLayout background color.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:orientation="vertical"
android:gravity="center"
android:layout_height="50dp"
android:background="#0E0D0D"
>
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_horizontal"
android:text="My Wechat"
android:textColor="@color/white"
android:textSize="25sp" />
</LinearLayout>
The effects are as follows:
2. bottom.xml layout
Create a new layout file button.xml.
First add a linear layout (vertical), modify the size and color of the linear layout: modify the configuration information corresponding to gravity to center, then modify the size and add id.
Add an ImageButton under the linear layout (vertical) just added, and select the picture to put in
Insert the code slice here<?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="60dp"
android:background="@color/colorViewNormal"
android:gravity="center">
<LinearLayout
android:id="@+id/chat"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
app:srcCompat="@drawable/chat2" />
</LinearLayout>
<LinearLayout
android:id="@+id/contacts"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
app:srcCompat="@drawable/contracts2" />
</LinearLayout>
<LinearLayout
android:id="@+id/circle_friend"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
app:srcCompat="@drawable/circleoffriend2" />
</LinearLayout>
<LinearLayout
android:id="@+id/settings"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
app:srcCompat="@drawable/setting1" />
</LinearLayout>
</LinearLayout>
Copy the three modified linearlayouts, modify the resource path of ImageButton, and modify the id of LinearLayout and ImageView respectively.
The effects are as follows:
3. Middle page setting
Create four layout.xml files, add an ImageView, modify the text content, and center the ImageView
<?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=".chat">
<ImageView
android:id="@+id/imageView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/chat"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
ps: an error message of "Missing Constraints in ConstraintLayout" may appear here
The solution is: Drag the dots around the buttons in the interface to the relative distance you want to set
4. activity_main.xml
The effect we want is that the title is at the top of the page, the text is displayed in the middle, and there are four buttons at the bottom, so in activity_ Add a LinearLayout in main.xml first
Add three sections in order in LinearLayout:
Add top.xml and button.xml through the include tag
Since the four pages displaying text are in the middle, you can choose to place a FrameLayout in the middle of top and button
<?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="com.example.mydemo.MainActivity">
<include layout="@layout/top"></include>
<FrameLayout
android:id="@+id/frame_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<ImageView
android:id="@+id/imageView9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/setting" />
</FrameLayout>
<include layout="@layout/bottom"></include>
</LinearLayout>
5. Resource control drawable file
Import the picture file into / res/drawable before use. You can directly drag the windows local file to the target folder
3, Page jump control (java file)
1. MainActivity
First create an instance object for the fragment class
Define a Fragment manager to control fragments
//FragmentManager
private FragmentManager fragmentManager;
Write another function to initialize the fragment, and put the four fragments into the FrameLayout
//Initializes the layer fragment of the middle part
private void initFragment(){
fragmentManager=getSupportFragmentManager();
FragmentTransaction transaction=fragmentManager.beginTransaction();
transaction.add(R.id.frame_content, Fragment_chat);
transaction.add(R.id.frame_content, Fragment_contacts);
transaction.add(R.id.frame_content, Fragment_circleoffriend);
transaction.add(R.id.frame_content, Fragment_setting);
//Commit transaction
transaction.commit();
}
What we need to achieve is that when we click the button, the button will change color and jump to the corresponding page. Therefore, we need to listen to the LinearLayout of the ImageButton. However, both ImageButton and LinearLayout are part of the layout file and we cannot call them directly. Therefore, we need to create a function initView() to instantiate the ImageButton and LinearLayout controls for our subsequent calls
In order to jump to the corresponding page after clicking the button, we can hide four interfaces first, and then display the selected page after clicking the button. You can choose to customize a * * HideFragment() * * function and call the hide() function to hide the four interfaces.
In order to change color after clicking the button, we can define a Fragment_select() function: pass in a parameter and display the corresponding page by calling the show() function of transaction.
In order to jump to the page by clicking the button, we need to monitor the. After the first MainActivity, add implements View.OnClickListener. There are comments in the specific function code of the function:
package com.example.mydemo;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.ImageView;
import android.widget.LinearLayout;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;
public class MainActivity extends AppCompatActivity implements View.OnClickListener{
//Fragment
private Fragment Fragment_chat =new chat();
private Fragment Fragment_contacts =new contacts();
private Fragment Fragment_circleoffriend =new circleoffriend();
private Fragment Fragment_setting =new setting();
//Bottom menu bar LinearLayout
private LinearLayout linear_chat;
private LinearLayout linear_contacts;
private LinearLayout linear_ciecleoffriend;
private LinearLayout linear_setting;
//Imageview in the bottom menu bar
private ImageView imageView_chat;
private ImageView imageView_contacts;
private ImageView imageView_circleoffriend;
private ImageView imageView_setting;
//FragmentManager
private FragmentManager fragmentManager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE );
setContentView(R.layout.activity_main);
initView();
initFragment();
initEvent();
Fragment_select(0);
//Set the first icon to selected
imageView_chat.setImageResource(R.drawable.chat);
imageView_chat.setImageResource(R.drawable.chat1);
}
//The monitor function monitors which icon is hit to display the content of which interface
@Override
public void onClick(View view) {
//After each click, set all imageviews and textviews to unchecked
restartButton();
switch(view.getId())
{
case R.id.chat:
//Select the layer segment corresponding to the clicked menu
Fragment_select(0);
//Set the click status of the menu to click status
imageView_chat.setImageResource(R.drawable.chat);
imageView_chat.setImageResource(R.drawable.chat1);
break;
case R.id.contacts:
Fragment_select(1);
imageView_contacts.setImageResource(R.drawable.contracts);
imageView_contacts.setImageResource(R.drawable.contracts1);
break;
case R.id.circle_friend:
Fragment_select(2);
imageView_circleoffriend.setImageResource(R.drawable.circleoffirend);
imageView_circleoffriend.setImageResource(R.drawable.circleoffriend1);
break;
case R.id.settings:
Fragment_select(3);
imageView_setting.setImageResource(R.drawable.setting);
imageView_setting.setImageResource(R.drawable.setting1);
break;
default:
break;
}
}
//Reset the click status of the menu to no click
private void restartButton() {
//Set to not clicked status
imageView_chat.setImageResource(R.drawable.chat);
imageView_chat.setImageResource(R.drawable.chat1);
imageView_contacts.setImageResource(R.drawable.contracts);
imageView_contacts.setImageResource(R.drawable.contracts1);
imageView_circleoffriend.setImageResource(R.drawable.circleoffirend);
imageView_circleoffriend.setImageResource(R.drawable.circleoffriend1);
imageView_setting.setImageResource(R.drawable.setting);
imageView_setting.setImageResource(R.drawable.setting1);
}
//Initializes the layer fragment of the middle part
private void initFragment(){
fragmentManager=getSupportFragmentManager();
FragmentTransaction transaction=fragmentManager.beginTransaction();
transaction.add(R.id.frame_content, Fragment_chat);
transaction.add(R.id.frame_content, Fragment_contacts);
transaction.add(R.id.frame_content, Fragment_circleoffriend);
transaction.add(R.id.frame_content, Fragment_setting);
//Commit transaction
transaction.commit();
}
//Initialize the LinearLayout, ImageView and TextView components at the bottom
private void initView(){
//Change icon color
linear_chat =findViewById(R.id.chat);
linear_contacts =findViewById(R.id.contacts);
linear_ciecleoffriend =findViewById(R.id.circle_friend);
linear_setting =findViewById(R.id.settings);
imageView_chat =findViewById(R.id.imageView1);
imageView_contacts =findViewById(R.id.imageView2);
imageView_circleoffriend =findViewById(R.id.imageView3);
imageView_setting =findViewById(R.id.imageView4);
}
//Initialize click listening event
private void initEvent(){
linear_chat.setOnClickListener(this);
linear_contacts.setOnClickListener(this);
linear_ciecleoffriend.setOnClickListener(this);
linear_setting.setOnClickListener(this);
}
//Hide the contents of unused interfaces
private void hideView(FragmentTransaction transaction){
transaction.hide(Fragment_chat);
transaction.hide(Fragment_contacts);
transaction.hide(Fragment_circleoffriend);
transaction.hide(Fragment_setting);
}
//The content of the selected interface is displayed, and the icon of the selected interface is green
private void Fragment_select(int i){
FragmentTransaction transaction=fragmentManager.beginTransaction();
//Call the hide all layers function
hideView(transaction);
switch (i){
case 0:
transaction.show(Fragment_chat);
break;
case 1:
transaction.show(Fragment_contacts);
break;
case 2:
transaction.show(Fragment_circleoffriend);
break;
case 3:
transaction.show(Fragment_setting);
break;
default:
break;
}
//Commit conversion transaction
transaction.commit();
}
}
2. Other Java files
There are four pages here, namely chat, contacts, circle of friends and me, corresponding to chat.java, contacts.java, circleoffriend.java and setting.java files.
4, Display of operation interface
Here I have only selected two interfaces for display
ps: the problem of "Emulator: handleCpuAcceleration: feature check for hvf" occurs after running here
terms of settlement: Modify profile
5, Source code
Detailed code uploaded to Code warehouse