开发者社区> itfitness> 正文

热搜自定义View

简介: 接下来将一步一步实现如下(热搜词)效果 效果图 思路:通过观察效果图可以看出这个热搜词效果自定义View它是一个接一个的摆放的,而且每当一行的热搜词总宽度大于控件宽度的时候就会另起一行,因此我们可以考虑使用一个大的自定义的LinearLayout包裹一些小的LinearLayout从而实现分行的效果,至于热搜词可以使用TextView加自定义Shap进行显示。
+关注继续查看

接下来将一步一步实现如下(热搜词)效果

img_a923c0710b16581e946ae00d320ff758.png
效果图

思路:通过观察效果图可以看出这个热搜词效果自定义View它是一个接一个的摆放的,而且每当一行的热搜词总宽度大于控件宽度的时候就会另起一行,因此我们可以考虑使用一个大的自定义的LinearLayout包裹一些小的LinearLayout从而实现分行的效果,至于热搜词可以使用TextView加自定义Shap进行显示。

步骤:

一,继承LinearLayout并设置为纵向排列

//继承LinearLayout
public class MyResouView extends LinearLayout {
    public MyResouView(Context context) {
        this(context,null);
    }
    public MyResouView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs,0);
    }
    public MyResouView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        //设置纵向排列
        this.setOrientation(VERTICAL);
    }
}

二,测量控件的宽度用于计算何时换行

(这里我尝试使用getMeasuredWidth()​发现获取不到值,或者获取到的为子控件宽度,使用getLayoutParams().width;照样获取不到,这里原因不清楚,(原谅我还是个菜逼O(∩_∩)O哈哈~)getWidth()可以获取到控件宽度,但是必须得window获取焦点后才可以,所以我在给热搜控件添加数据的方法中延时了100毫秒。)
 public void setResouwords(String[] resouwords) {
    mResouwords = resouwords;
    new Handler().postDelayed(new Runnable(){
        public void run() {
            //获取控件宽度
            mMWidth = getWidth();
            removeAllViews();
            lineWidth=0;
            initView();
        }
    }, 100);
}

三,开始向此控件中添加子控件

private void initView() {
    LinearLayout linearlayout;
    TextView textView;
    //创建每行LinearLayout的LayoutParams
    LinearLayout.LayoutParams params=new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
    //创建TextView的LayoutParams
    LinearLayout.LayoutParams paramsTextView=new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
    //设置每个热词间距10
    paramsTextView.setMargins(10,0,0,0);
    //设置每行间距2
    params.topMargin=2;
    params.bottomMargin=2;
    linearlayout=new LinearLayout(getContext());
    linearlayout.setLayoutParams(params);
    //设置每行LinearLayout排列方式为横向排列
    linearlayout.setOrientation(HORIZONTAL);
    //当热搜词数据不为空时循环添加TextView
    if(mResouwords.length>0){
        for(int x=0;x<mResouwords.length;x++){
            textView = new TextView(getContext());
            textView.setLayoutParams(paramsTextView);
            textView.setText(mResouwords[x]);
            textView.setPadding(12, 6, 12, 6);
            textView.setTextSize(mTextSize);
            //计算每个TextView的宽度
            textView.measure(0,0);
            lineWidth+=textView.getMeasuredWidth()+10;
            //当宽度大于控件宽度的时候重新添加一行
            if(lineWidth>mMWidth){
                if(linearlayout!=null){
                    this.addView(linearlayout);
                }
                linearlayout=new LinearLayout(getContext());
                linearlayout.setLayoutParams(params);
                lineWidth=0;
            }
            linearlayout.addView(textView);
        }
        //添加最后一行
        this.addView(linearlayout);
    }
}

此时效果为这样,初步换行功能已经实现,但是距离目标效果图还差点感觉。

img_fee69bbda1e144cfc2cc78f81ce6e1df.png
效果图

四,接下来我们实现边框的添加

首先在drawable中添加两个shap文件(用来描绘边框)

img_047898b3b4298f76cfe74c1a47c74f26.png
shap文件

接下来大家肯定会想再添加一个selector来实现点击效果吧,这里思路是没错只不过为了实现灵活的设置背景及边框颜色,这里我们采取另一种方法实现(代码动态添加)。

这里我们采用:

StateListDrawable//实现背景的切换
ColorStateList//实现文字颜色的切换

StateListDrawable用法

 mBackgrounddrawable = new StateListDrawable();
 GradientDrawable myGrad_unpress = (GradientDrawable) getResources().getDrawable(R.drawable.resouback_unpress);
 GradientDrawable myGrad_press = (GradientDrawable) getResources().getDrawable(R.drawable.resouback_pressed);
 //设置背景
 myGrad_unpress.setColor(normalBackgroundColor);
 myGrad_press.setColor(pressBackgroundColor);
 //设置边线
 myGrad_press.setStroke(mStrokeWidth,pressStrokeColor);
 myGrad_unpress.setStroke(mStrokeWidth,normalStrokeColor);
 //设置双线性过滤
 myGrad_press.setDither(true);
 myGrad_unpress.setDither(true);
 //设置状态加-的为不按的效果
 mBackgrounddrawable.addState(new int[]{-android.R.attr.state_pressed},myGrad_unpress);
 mBackgrounddrawable.addState(new int[]{android.R.attr.state_pressed},myGrad_press);

ColorStateList用法

int[] colors = new int[] { pressed, normal };
int[][] states = new int[2][];
//每一个二维数组都可以添加很多状态
states[0] = new int[] { android.R.attr.state_pressed};
states[1] = new int[] { -android.R.attr.state_pressed};
ColorStateList colorList = new ColorStateList(states, colors);

最后给TextView添加上面写的状态

textView.setBackground(mBackgrounddrawable);
textView.setTextColor(colorList);

实现后效果图如下,此时基本效果已经实现,再加入set和get方法便可以实现用户自定义颜色了,接下来就差最后一步了那就是添加点击事件。

img_8ebf597c4ff39af2d9ead114a413bfbb.png
效果图

五,实现item点击事件(这里我们使用接口的方式)

首先自定义一个接口

public interface ResouViewItemClickListener {
    /**
     *
     * @param view 返回点击的TextView
     * @param index 返回点击item的索引默认从0开始
     */
    void onItemClick(TextView view,int index);
}

接下来在MyResouView中将此接口添加为属性并添加set和get方法

 private ResouViewItemClickListener mResouViewItemClickListener;
    public ResouViewItemClickListener getResouViewItemClickListener() {
        return mResouViewItemClickListener;
    }
    /**
     *
     * @param resouViewItemClickListener item点击事件
     */
    public void setResouViewItemClickListener(ResouViewItemClickListener resouViewItemClickListener) {
        mResouViewItemClickListener = resouViewItemClickListener;
}

然后给TextView添加点击事件(这里的x为每个条目的position)

final int finalX = x;
textView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
    if (mResouViewItemClickListener != null) {
     //返回textView
     mResouViewItemClickListener.onItemClick((TextView) v, finalX);
        }
     }
});

最后在Activity中添加点击事件

mMyResouView = (MyResouView) findViewById(R.id.myview);
    mMyResouView.setNormalTextColor(Color.BLUE);
    mMyResouView.setPressTextColor(Color.GREEN);
    mMyResouView.setTextSize(20);
    mMyResouView.setStrokeWidth(1);
    mMyResouView.setResouViewItemClickListener(new ResouViewItemClickListener() {
        @Override
        public void onItemClick(TextView view, int index) {
            med.setText(view.getText());
            Toast.makeText(MainActivity.this, ""+index, Toast.LENGTH_SHORT).show();
        }
    });

最后上效果图并附上源码地址:(https://github.com/myml666/ResouView

img_a43db9f6721ec5fa99e43cba8c64dd61.gif
最终效果图

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
3.6 自定义View (3.6.1)
本文对应项目的码云地址:https://gitee.com/wanchuanxy/AndroidHeroesTest/tree/master/3/SystemWidget Android给我们提供了丰富的组件库来创建丰富的UI效果,同时也提供了非常方便的拓展方法。
629 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
29165 0
自定义View(二)简单的viewgroup
上篇讲了自定义View的简单实现,这章就趁热打铁,讲讲自定义ViewGroup的简单实现。 一、初探 和上篇一样,看看ViewGroup的绘制是什么走的。
619 0
自定义View -简单的 SwitchView
前言 实现一个简单的滑动开发,效果图如下: switchView完整版本 分析 平分整个View为两份 平分VIew 测量字体的高度和宽度,确定左右View的文字的位置并进行绘制 确定字体的位置和绘制 绘制...
832 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
20700 0
+关注
itfitness
爱代码、爱音乐、爱健身
107
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载