文章目录
一、功能需求
完成一个类似微信页面的布局,要求:
- 页面最上方是标题居中
- 页面中间界面显示内容,内容随下方栏的选择而切换
- 页面最下方有四个按钮
- 点击按钮后,按钮图标会变换颜色,且显示框变换内容
二、页面布局设置
1. 顶部top.xml布局
创建layout文件top.xml中,添加文本框,添加文字,设置为居中,修改文字颜色和LinearLayout背景颜色。
<?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="我的微信"
android:textColor="@color/white"
android:textSize="25sp" />
</LinearLayout>
效果如下:
2. 底部bottom.xml布局
新建layout布局文件button.xml。
先添加一个LinearLayout(vertical),修改LinearLayout大小和颜色:修改gravity所对应的配置信息为center,再修改大小,添加id。
在刚刚添加的LinearLayout(vertical)下添加ImageButton,选择要放入的图片
在这里插入代码片<?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>
复制三个修改好的LinearLayout,修改ImageButton的资源路径,分别修改LinearLayout、ImageView的id。
效果如下:
3. 中间页面设置
新建四个layout.xml文件,分别添加一个ImageView,修改文字内容,并将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:这里可能会出现“Missing Constraints in ConstraintLayout”的报错
解决方案是:拖拽界面中按钮四周的圆点,到你想要设置的相对距离
4. activity_main.xml
我们想要的效果是页面最上方是标题,中间显示文本,最下方有四个按钮,故在activity_main.xml中先添加一个LinearLayout
在LinearLayout中按顺序添加三个部分:
通过include标签添加top.xml和button.xml
由于四个显示文本的页面都是在中间,故选择通过放一个FrameLayout在top和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. 资源控制drawable文件
在使用之前先将图片文件导入到/res/drawable中,可以直接将windows本地文件拖拽至目标文件夹中
三、页面跳转控制(java文件)
1. MainActivity
先为fragment类创建实例对象
定义一个FragmentManager来控制Fragment
//FragmentManager
private FragmentManager fragmentManager;
再写一个初始化Fragment的函数,将四个fragment放到FrameLayout中
//初始化中间的部分的图层片段
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);
//提交事务
transaction.commit();
}
我们需要实现的是,点击按钮,按钮会变色,并且跳转到相应的页面。所以我们需要对ImageButton所属的LinearLayout来进行监听,但是ImageButton和LinearLayout都属于布局文件中的一部分,我们不能直接调用,所以需要创建一个函数initView()来实现对ImageButton和LinearLayout控件实例化,方便我们后续调用
为实现点击按钮之后可以跳转到相应的页面,我们可以先隐藏四个界面,在点击button后再显示出选择的页面。可以选择自定义一个**HideFragment()**函数,调用hide()函数隐藏四个界面。
为实现点击按钮后变色,我们可以定义一个Fragment_select()函数来实现:传入一个参数,通过调用transaction的show()函数,展示对应的页面。
为实现点击按钮跳转页面,我们需要对进行监听。在最开头的MainActivity后添加implements View.OnClickListener,函数具体作用代码中有注释:
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();
//底端菜单栏LinearLayout
private LinearLayout linear_chat;
private LinearLayout linear_contacts;
private LinearLayout linear_ciecleoffriend;
private LinearLayout linear_setting;
//底端菜单栏中的Imageview
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);
//将第一个图标设为选中状态
imageView_chat.setImageResource(R.drawable.chat);
imageView_chat.setImageResource(R.drawable.chat1);
}
//监听函数,监听到底是哪一个图标被击中从而显示哪一个界面的内容
@Override
public void onClick(View view) {
//每次点击之后,将所有的ImageView和TextView设置为未选中
restartButton();
switch(view.getId())
{
case R.id.chat:
//选择所点击的菜单对应的图层片段
Fragment_select(0);
//将该菜单的点击状态置为点击态
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;
}
}
//重置菜单的点击状态,设为未点击
private void restartButton() {
//设置为未点击状态
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);
}
//初始化中间的部分的图层片段
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);
//提交事务
transaction.commit();
}
//初始化各底端的LinearLayout、ImageView和TextView组件
private void initView(){
//改变图标颜色
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);
}
//初始化点击监听事件
private void initEvent(){
linear_chat.setOnClickListener(this);
linear_contacts.setOnClickListener(this);
linear_ciecleoffriend.setOnClickListener(this);
linear_setting.setOnClickListener(this);
}
//把没有使用的界面的内容隐藏
private void hideView(FragmentTransaction transaction){
transaction.hide(Fragment_chat);
transaction.hide(Fragment_contacts);
transaction.hide(Fragment_circleoffriend);
transaction.hide(Fragment_setting);
}
//显示选中界面的内容,选中界面图标为绿色
private void Fragment_select(int i){
FragmentTransaction transaction=fragmentManager.beginTransaction();
//调用隐藏所有图层函数
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;
}
//提交转换事务
transaction.commit();
}
}
2. 其他Java文件
这里因为有四个页面,分别是聊天、联系人、朋友圈、我,对应着chat.java、contacts.java、circleoffriend.java、setting.java文件。
四、运行界面展示
结果展示我只选了两个界面进行展示
中间的内容,我并没选择使用文本框,而是自己实际微信界面的截图,这样显得更加真实。
ps:这里运行后出现了“Emulator: handleCpuAcceleration: feature check for hvf”问题
解决办法:修改配置文件
五、源码
自己之前已有GitHub的账号,所以就直接将代码上传了。
ssh-keygen -t rsa -C "我的邮箱"生成密钥
出现了“invalid authentication data. 404 Not Found-Not Found”问题,这里应选择利用token连接
详细代码已上传至代码仓库