你可以创建自己的“按钮”布局,例如:
:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:focusable="true" android:focusableInTouchMode="false"
android:clickable="true" android:padding="5dp"
android:background="@drawable/button_background_selector">
<ImageView android:id="@+id/personimage"
android:layout_width="80dp" android:layout_height="fill_parent"
android:layout_centerVertical="true" android:scaleType="fitCenter"
android:paddingRight="5dp" />
<TextView android:id="@+id/personname" android:duplicateParentState="true"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:singleLine="true" android:layout_toRightOf="@id/personimage"
android:layout_alignParentRight="true" android:layout_centerVertical="true"
android:textColor="@drawable/button_text_selector" />
<ImageView android:id="@+id/thumb1" android:scaleType="fitCenter"
android:layout_width="25dp" android:layout_height="25dp"
android:layout_toRightOf="@id/personimage"
android:layout_alignParentBottom="true" />
<ImageView android:id="@+id/thumb2" android:scaleType="fitCenter"
android:layout_width="25dp" android:layout_height="25dp"
android:layout_toRightOf="@id/thumb1"
android:layout_alignParentBottom="true" />
<ImageView android:id="@+id/thumb3" android:scaleType="fitCenter"
android:layout_width="25dp" android:layout_height="25dp"
android:layout_toRightOf="@id/thumb2"
android:layout_alignParentBottom="true" />
</RelativeLayout>
同时还需要以下内容:
- 状态可绘制(背景和文本颜色的选择器)
- 层级可绘制(普通、聚焦、按下)
res/drawable/button_text_selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:color="@color/fb_text_pressed" />
<item android:state_focused="true" android:color="@color/fb_text_focused" />
<item android:color="@color/fb_text" />
</selector>
res/drawable/button_background_selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="@drawable/button_selected" />
<item android:state_focused="true"
android:drawable="@drawable/button_focused" />
<item android:drawable="@drawable/button_normal" />
</selector>
res/drawable/button_normal.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="2dp" android:bottom="2dp">
<shape android:shape="rectangle">
<gradient android:angle="-90"
android:startColor="@color/fb_border_start"
android:centerColor="@color/fb_border_center"
android:endColor="@color/fb_border_end" />
<corners android:bottomRightRadius="10dp"
android:bottomLeftRadius="10dp" android:topLeftRadius="10dp"
android:topRightRadius="10dp" />
</shape>
</item>
<item android:top="4dp" android:left="2dp" android:right="2dp"
android:bottom="4dp">
<shape android:shape="rectangle">
<gradient android:angle="90"
android:startColor="@color/fb_normal_start"
android:centerColor="@color/fb_normal_center"
android:endColor="@color/fb_normal_end" />
<corners android:bottomRightRadius="8dp"
android:bottomLeftRadius="8dp" android:topLeftRadius="8dp"
android:topRightRadius="8dp" />
</shape>
</item>
</layer-list>
res/drawable/button_focused.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="2dp" android:bottom="2dp">
<shape android:shape="rectangle">
<gradient android:angle="-90"
android:startColor="@color/fb_border_start"
android:centerColor="@color/fb_border_center"
android:endColor="@color/fb_border_end" />
<corners android:bottomRightRadius="10dp"
android:bottomLeftRadius="10dp" android:topLeftRadius="10dp"
android:topRightRadius="10dp" />
</shape>
</item>
<item android:top="4dp" android:left="2dp" android:right="2dp"
android:bottom="4dp">
<shape android:shape="rectangle">
<gradient android:angle="90"
android:startColor="@color/fb_focused_start"
android:centerColor="@color/fb_focused_center"
android:endColor="@color/fb_focused_end" />
<corners android:bottomRightRadius="8dp"
android:bottomLeftRadius="8dp" android:topLeftRadius="8dp"
android:topRightRadius="8dp" />
</shape>
</item>
</layer-list>
res/drawable/button_selected.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="2dp" android:bottom="2dp">
<shape android:shape="rectangle">
<gradient android:angle="-90"
android:startColor="@color/fb_border_start"
android:centerColor="@color/fb_border_center"
android:endColor="@color/fb_border_end" />
<corners android:bottomRightRadius="10dp"
android:bottomLeftRadius="10dp" android:topLeftRadius="10dp"
android:topRightRadius="10dp" />
</shape>
</item>
<item android:top="4dp" android:left="2dp" android:right="2dp"
android:bottom="4dp">
<shape android:shape="rectangle">
<gradient android:angle="90"
android:startColor="@color/fb_selected_start"
android:centerColor="@color/fb_selected_center"
android:endColor="@color/fb_selected_end" />
<corners android:bottomRightRadius="8dp"
android:bottomLeftRadius="8dp" android:topLeftRadius="8dp"
android:topRightRadius="8dp" />
</shape>
</item>
</layer-list>
您需要在 res/values/colors.xml 文件中指定正确的颜色值:
<color name="fb_border_start">#AAAAAA</color>
<color name="fb_border_center">#888888</color>
<color name="fb_border_end">#666666</color>
<color name="fb_normal_start">#088F8F8F</color>
<color name="fb_normal_center">#08656565</color>
<color name="fb_normal_end">#083F3F3F</color>
<color name="fb_focused_start">#8F8F8F</color>
<color name="fb_focused_center">#656565</color>
<color name="fb_focused_end">#3F3F3F</color>
<color name="fb_selected_start">#EAEAEA</color>
<color name="fb_selected_center">#9F9F9F</color>
<color name="fb_selected_end">#696969</color>
<color name="fb_text">#FF6600</color>
<color name="fb_text_focused">#F8F8F8</color>
<color name="fb_text_pressed">#00AAEE</color>
现在,您只需要为此
FancyButton
视图设置一个属性集,当然还需要
FancyButton.java
类来填充此布局:
res/values/attrs.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="FancyButton">
<attr name="text" format="string|reference" />
<attr name="icon" format="reference" />
<attr name="thumb1" format="reference" />
<attr name="thumb2" format="reference" />
<attr name="thumb3" format="reference" />
</declare-styleable>
</resources>
FancyButton.java
package com.yourpackage.sample;
public class FancyButton extends RelativeLayout
{
private String label;
private int icon;
private int thumb1, thumb2, thumb3;
public FancyButton(Context context)
{
super(context);
initAttributes(context, null);
}
public FancyButton(Context context, AttributeSet attrs)
{
super(context, attrs);
initAttributes(context, attrs);
}
public FancyButton(Context context, AttributeSet attrs, int defStyle)
{
super(context, attrs, defStyle);
initAttributes(context, attrs);
}
private void initAttributes(Context context, AttributeSet attrs)
{
LayoutInflater.from(context).inflate(R.layout.fancy_button, this, true);
TypedArray a =
context.obtainStyledAttributes(attrs, R.styleable.FancyButton);
final int N = a.getIndexCount();
for (int i = 0; i < N; ++i)
{
int attr = a.getIndex(i);
switch (attr)
{
case R.styleable.FancyButton_text:
setLabel(a.getString(attr));
break;
case R.styleable.FancyButton_icon:
setIcon(a.getResourceId(attr, 0));
break;
case R.styleable.FancyButton_thumb1:
setThumb1(a.getResourceId(attr, 0));
break;
case R.styleable.FancyButton_thumb2:
setThumb2(a.getResourceId(attr, 0));
break;
case R.styleable.FancyButton_thumb3:
setThumb3(a.getResourceId(attr, 0));
break;
}
}
a.recycle();
}
public String getLabel()
{
return this.label;
}
public void setLabel(final String label)
{
this.label = label;
((TextView)findViewById(R.id.personname)).setText(this.label);
}
public int getIcon()
{
return icon;
}
public void setIcon(int icon)
{
this.icon = icon;
((ImageView)findViewById(R.id.personimage)).setImageResource(this.icon);
}
public int getThumb1()
{
return thumb1;
}
public void setThumb1(int thumb1)
{
this.thumb1 = thumb1;
((ImageView)findViewById(R.id.thumb1)).setImageResource(this.thumb1);
}
public int getThumb2()
{
return thumb2;
}
public void setThumb2(int thumb2)
{
this.thumb2 = thumb2;
((ImageView)findViewById(R.id.thumb2)).setImageResource(this.thumb2);
}
public int getThumb3()
{
return thumb3;
}
public void setThumb3(int thumb3)
{
this.thumb3 = thumb3;
((ImageView)findViewById(R.id.thumb3)).setImageResource(this.thumb3);
}
}
这样,您就可以得到像这样的按钮:
![fancy buttons activity](https://istack.dev59.com/vTMPI.webp)
显示上述三个按钮的活动布局为:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:custom="http://schemas.android.com/apk/res/com.yourpackage.sample"
android:layout_width="match_parent" android:layout_height="match_parent"
android:orientation="vertical">
<com.yourpackage.sample.FancyButton android:id="@+id/fbtn1"
android:layout_width="200dp" android:layout_height="90dp"
custom:text="Normal state" custom:icon="@drawable/network_error"
custom:thumb1="@drawable/connected" custom:thumb2="@drawable/disconnected"
custom:thumb3="@drawable/network" />
<com.yourpackage.sample.FancyButton android:id="@+id/fbtn2"
android:layout_width="200dp" android:layout_height="90dp"
custom:text="Focused state" custom:icon="@drawable/connected"
custom:thumb1="@drawable/network" custom:thumb2="@drawable/network_error"
custom:thumb3="@drawable/disconnected" />
<com.yourpackage.sample.FancyButton android:id="@+id/fbtn3"
android:layout_width="200dp" android:layout_height="90dp"
custom:text="Pressed state" custom:icon="@drawable/disconnected"
custom:thumb1="@drawable/network_error" custom:thumb2="@drawable/connected"
custom:thumb3="@drawable/network" />
</LinearLayout>