安卓开发类微信界面设计

一、基础信息

1.1 环境配置

Android Studio 4.1.2
Gradle 6.5
JDK 12
Android 7.0

1.2 需求描述

需要在Android Studio中设计出类微信界面，即顶栏具有吸顶的标题，底栏具有吸底的四栏布局，且点击布局中的不同按钮在屏幕上切换不同的页面。

1.3 演示效果

二、操作步骤

2.1 顶部设计

首先设计界面的吸顶部分，新建layout XML File命名为top.xml,

在Component Tree中拖入一个horizontal LinearLayout,再拖入一个TextView填入微信。

接下来设计样式：

android:layout_height="50sp"设置顶栏高度为50sp，android:gravity="center"设置文字居中显示。android:background="@color/teal_700"设置背景颜色，颜色可以在colors.xml中查找。

最后查看效果：

2.2 底栏设计

新建一个xml文件命名为bottom.xml，然后拖入一个LinearLayout(vertical),再在里面拖入一个ImageView和TextView。设置图片高度和文字样式。

android:layout_height="50dp"设置图片高度为50dp，android:clickable="false"防止图片被重复点击，android:gravity="center"设置文字居中显示。

然后如法炮制在Component Tree中复制三个相同的LinearLayout，

这个时候四个LinearLayout会垂直排布，接下来设置android:layout_width="wrap_content",android:layout_height="wrap_content"让他们的宽度和高度适应内容。

为了使其等距排布，我们还需要在每个LinearLayout中设置android:layout_weight="1"

layout_weight的意思就是该布局所占的权重，假如有4个布局，每个都是1，那么四个布局权重相等，每个都占25%。

效果如下：

2.3 中间部分设计

中间部分的内容会随着底栏的不同按钮切换而改变，为了实现动态地变换，需要创建4个Fragment.

创建Fragment后会在layout中自动生成相应的xml文件。

最后结构如下：

2.4 整合顶栏和底栏

我们将bottom.xml和top.xml整合到layout_main.xml中。

设置bottom的android:layout_height="wrap_content"

然后到layout_main里设置android:orientation="vertical"和android:layout_height="wrap_content",不然会因为水平布局和top高度太大显示不完整。

看看效果

接下来把底栏放到最下面

我们在两个include中间放一个FragmentLayout,来把底栏"挤下去"。

然后调整它的高度到合适的位置

看看效果：

2.5 逻辑代码

2.5.1 整合中间页面

在MainActivity中关联所有的Fragment。通过FragmentManager事务管理器添加fragment
在onCreate()中，开始事务，添加一个fragment到FrameLayout中，然后提交事务。

public class MainActivity extends AppCompatActivity {

    // 事务管理器
    FragmentManager fm = getSupportFragmentManager();

    Fragment messageFragment = new MessageFragment();
    Fragment friendFragment = new FriendFragment();
    Fragment circleFragment = new CircleFragment();
    Fragment meFragment = new MeFragment();

    @NonNull
    @Override
    public FragmentManager getSupportFragmentManager() {
        return super.getSupportFragmentManager();
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        this.requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.layout_main);
        // 开启事务、添加fragment、提交事务
        fm.beginTransaction().add(R.id.content, messageFragment).commit();
    }
}

效果如下：

由于排版还有一些问题，我们再继续优化

然后我们把全部fragment添加进去

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    this.requestWindowFeature(Window.FEATURE_NO_TITLE);
    setContentView(R.layout.layout_main);
    // 开启事务、添加fragment、提交事务
    FragmentTransaction ft = fm.beginTransaction();
    ft.add(R.id.content, messageFragment);
    ft.add(R.id.content, friendFragment);
    ft.add(R.id.content, circleFragment);
    ft.add(R.id.content, meFragment);
    // 隐藏所有fragment
    hideAll(ft);    
    ft.commit();
}
private void hideAll(FragmentTransaction ft) {
    ft.hide(messageFragment);
    ft.hide(friendFragment);
    ft.hide(circleFragment);
    ft.hide(meFragment);
}

2.5.2 添加点击事件

具体的实现步骤

定义LinearLayout
继承View.OnClickListener接口，编写点击事件
给LinearLayout绑定点击事件

wechat =findViewById(R.id.message);
friend = findViewById(R.id.friend);
circle = findViewById(R.id.circle);
me = findViewById(R.id.me);

继承View.OnClickListener，重写onClick()。

@Override
    public void onClick(View v) {
        // 开启事务
        FragmentTransaction fragmentTransaction = fm.beginTransaction();
        // 隐藏所有的fragment
        hideAll(fragmentTransaction);
        // 判断点击的是哪个LinearLayout
        switch (v.getId()) {
            case R.id.wechat:
                fragmentTransaction.show(this.messageFragment);
                break;
            case R.id.friend:
                fragmentTransaction.show(this.friendFragment);
                break;
            case R.id.circle:
                fragmentTransaction.show(this.circleFragment);
                break;
            case R.id.me:
                fragmentTransaction.show(this.meFragment);
                break;
        }
        // 提交事务
        fragmentTransaction.commit();
    }

最后可以通过点击切换不同页面

2.5.3 点击图片后显示激活状态

步骤如下：

关联所有的ImageView
根据 id绑定ImageView
在点击事件中，添加图片切换逻辑

ImageView messageImage,friendImage,circleImage,meImage;
// 关联图片
messageImage = findViewById(R.id.wechatImg);
friendImage = findViewById(R.id.friendImg);
circleImage = findViewById(R.id.circleImg);
meImage = findViewById(R.id.meImg);

// 将所有图片设置为未激活
messageImage.setImageResource(R.drawable.wechat);
friendImage.setImageResource(R.drawable.friends);
circleImage.setImageResource(R.drawable.color_palette);
meImage.setImageResource(R.drawable.user);

优化点击监听事件

@Override
public void onClick(View v) {
    // 开启事务
    FragmentTransaction fragmentTransaction = fm.beginTransaction();
    // 隐藏所有的fragment
    hideAll(fragmentTransaction);
    deactivateAllImage();
    // 判断点击的是哪个LinearLayout
    switch (v.getId()) {
        case R.id.wechat:
            fragmentTransaction.show(this.messageFragment);
            // 将图片设置为激活
            messageImage.setImageResource(R.drawable.wechat_active);
            break;
        case R.id.friend:
            fragmentTransaction.show(this.friendFragment);
            friendImage.setImageResource(R.drawable.friends_active);
            break;
        case R.id.circle:
            fragmentTransaction.show(this.circleFragment);
            circleImage.setImageResource(R.drawable.color_active);
            break;
        case R.id.me:
            fragmentTransaction.show(this.meFragment);
            meImage.setImageResource(R.drawable.user_active);
            break;
    }
    // 提交事务
    fragmentTransaction.commit();
}

至此UI设计完成！

学习笔记安卓开发

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议，转载请注明出处！

记一次Java poi导出Excel全部出现损坏无法打开的问题解决上一篇

安卓开发RecyclerView设计下一篇