美文网首页
Android UI-Material Design-Butto

Android UI-Material Design-Butto

作者: twinsnan | 来源:发表于2016-12-23 21:17 被阅读0次

概述

因为Android中Button是一个使用频率非常高的一个组件,一般只要使用系统提供的就可以了。但是使用Button有一个非常大的限制,那就是要丰富Button的内容比较麻烦,因为Button有固定的放置图片等的套路。那么解决方法是什么呢,就是自定义一个布局,然后使其有Mateiral Design 一样的Button的表现。

Button是如何做的

我们看下在Android24下的Button源码。

public class Button extends TextView {
    public Button(Context context) {
        this(context, null);
    }

    public Button(Context context, AttributeSet attrs) {
        this(context, attrs, com.android.internal.R.attr.buttonStyle);
    }

    public Button(Context context, AttributeSet attrs, int defStyleAttr) {
        this(context, attrs, defStyleAttr, 0);
    }

    public Button(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }

    @Override
    public CharSequence getAccessibilityClassName() {
        return Button.class.getName();
    }
}

上面是Button中的代码,可以看到非常简单。Button只是继承了TextView。从本质上来讲,Button就是一个TextView。然而我们知道TextView是没有如Button一样的Material Design效果的。
我们仔细看这段代码,只有一个地方和Button有那么一点关系,那就是设置了一个com.android.internal.R.attr.buttonStyle的属性,这就是整个问题的关键。
那么现在要解决的问题就是,如何给自己的控件设置这样一个AttributeSet的问题了。

在代码中尝试

首先我们想到的就是,能不能在代码中创建的时候就设定这样一个属性。但是我们需要传入AttributeSet这个属性,这个属性在代码中获取不到(我没有找到方法,如果有,希望有大神告知)。

在XML中尝试

首先呢,我们自定义一个布局

 <LinearLayout
        android:id="@+id/main_meeting_rl_create"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:gravity="center"
        android:orientation="horizontal"
        android:background="@color/colorPrimaryDark">

        <ImageView
            android:id="@+id/main_meeting_iv_create"
            android:layout_width="15dp"
            android:layout_height="15dp"
            android:src="@drawable/add" />

        <TextView
            android:id="@+id/main_meeting_tv_create"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="10dp"
            android:text="加入"
            android:textColor="#FFFFFF" />
    </LinearLayout>

在界面中我们没有发现特殊的效果


image.png

那怎么办呢,好像没有办法。但是我们知道,我们可以给android自定义属性。
那么先来看下com.android.internal.R.attr.buttonStyle中到底是什么。查看源码,我们看到一个XML布局文件

<style name="Widget.Button"> 
    <item name="android:background">@android:drawable/btn_default</item> 
    <item name="android:focusable">true</item> 
    <item name="android:clickable">true</item> 
    <item name="android:textSize">20sp</item> 
    <item name="android:textStyle">normal</item> 
    <item name="android:textColor">@android:color/button_text</item> 
    <item name="android:gravity">center_vertical|center_horizontal</item> 
</style> 

其系统自带的Style的名称是Widget.Button。所以我们也可以在attrs文件中写一个style来继承系统的Style。代码如下

<style name="ButtonStyle" parent="Widget.AppCompat.Button"></style>

非常简单,我们不做其他事情。但是要实现Material Design效果,我们需要继承AppCompat.Button这个Style。
然后就大功告成了,如下图,就是非常标准的Material Design的效果了。


1.gif

相关文章

网友评论

      本文标题:Android UI-Material Design-Butto

      本文链接:https://www.haomeiwen.com/subject/vlakvttx.html