大项目页面小功能实现 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第32天

作者：eric0202

前言

简单说一下项目中实现的几个有意思的功能

1. 展开介绍

关于介绍的展开，其实原版抖音好像没有这个功能， 至少从字节提供的软件界面看到是只有修改功能，没有展开查看（我没怎么用过抖音也不清楚）

看着像是只有一个编辑功能。

但我觉得自我介绍应该不止一句吧。于是加了个这个，实现起来非常的简单，通过maxlines和singleline属性就可以了，maxlines可以控制最长的长度，防止显示过于长，不好看，singleline可以控制是否只显示一行。

xml代码：

<TextView
    android:id="@+id/tv_info"
    android:textColorHint="#888"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:hint="click to add info"
    android:textSize="16sp"
    android:textColor="@color/black"
    android:singleLine="true"
    android:layout_weight="1"
    android:maxLines="10"
    android:padding="15dp"/>

xml中我只定义了maxlines属性，写死最大长度，是否收缩为1行这个在java中通过点击改变。点击的控件为右边的三角符号。

ImageButton btn_expand = binding.btnExpand;
btn_expand.setOnClickListener(new View.OnClickListener() {

    @Override
    public void onClick(View view) {
        TextView tv = binding.tvInfo;
        singleLine = !singleLine;
        tv.setSingleLine(singleLine);
    }
});

对于是否单行singleline的变量， 我定义为了boolean类型，正好setsingleline的参数也是boolean，就可以减少代码量。

build，run，点击，运行成功。 但是发现了一个问题， 除了运行效果成功，如果本来内容就只有一行的话就缺少反馈不知道有没有生效了。于是需要添加一些动效。我选择的是让右边三角倒转。

效果如图：

三角从倒向变为了正向。

实现通过glide

Glide.with(getContext()).load(R.drawable.arrow).transform(new Rotate(180)).into(binding.btnExpand);

2. 右上角菜单

安卓的appbar右上角是有菜单按键这个属性的。点击之后有动画。但是仔细看了觉得安卓自带的不是通过图片实现的，抖音的是自己的icon，而且旁边还有另一个icon，那就说明我们需要自己写一个imageButton了。

首先我们需要的相应为弹出菜单，popupmenu，在java中定义。

// 展示menu，点击了右上角图标后
@SuppressLint("NonConstantResourceId")
private void showMenu(View view) {
    PopupMenu popupMenu = new PopupMenu(getContext(), view);
    popupMenu.getMenuInflater().inflate(R.menu.menu_settings_mine, popupMenu.getMenu());

    popupMenu.setOnMenuItemClickListener(menuItem -> {
        switch (menuItem.getItemId()) {

            case R.id.settings:
                showNoFunction();
            case R.id.change_bg:
                // 我的功能
                return true;

        }

        return true;
    });

将按键绑定上去，setOnclicklistener，

menu的选项在R中用xml定义。

运行， 搞定

不过还是感觉稍有欠缺，于是再给button添加点击动画。观感就好多了。