Android--在一个Button上显示不同类型的字体

今天写界面的时候,为了让界面更加美观,要在一个Button上显示不同颜色的字体,及线条、图片。 但是这个问题困扰了我很久,现在终于实现了。
先放效果图:
Android--在一个Button上显示不同类型的字体_第1张图片

整个控件是一个Button。
1、首先先绘制底部的背景图
采用xml的layer-list来绘制。
btn_bg.xml

  
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">  
    <item>  
       <shape>  
            <solid android:color="#FFF63740" />  
       shape>  
    item>  
    <item android:right="5dp" >  
       <shape>  
            <solid android:color="#FFFAF8F8" />  
       shape> 
    item>  
    <item android:right="30dp" >         
        <bitmap android:src="@drawable/red_ball"
            android:gravity="right"  />
    item>   
layer-list>   

先用红色铺满整个控件,再用另一种颜色铺满,只在右边留下一条5dp线,再在上面铺上红色的球。
现在得到了背景图:
Android--在一个Button上显示不同类型的字体_第2张图片

2.接下要在Button中显示2个不同类型的字体
因为一个Button只能显示一种字体,我的思路是把2个Textview放到这一个Button中。所以就要写自己的Button控件

2.1先写自己的Button内部的布局

my_button.xml


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:orientation="horizontal"
    android:background="@drawable/btn_bg" >
            <TextView
                android:id="@+id/textview1"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
               android:text="红" 
                android:textColor="#606060"
                android:textSize="20sp" 
                android:gravity="center"
                android:layout_marginLeft="25dp"                               
                />
            <TextView
                 android:id="@+id/textview2"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:text="200ms 开 | 200ms 关"
                 android:textColor="#FFF63740"
                android:textSize="20sp"              
                android:gravity="center"
                android:layout_marginLeft="25dp"                               
                />
LinearLayout>

2.2 再创建自己的Button继承该布局文件

MyButton.java

public class MyButton extends LinearLayout{ 
       TextView textView1,textView2; 

 public MyButton(Context context) 
 { 
       super(context, null); 
 } 

 public MyButton(Context context, AttributeSet attrs) { 
       super(context, attrs); 
      LayoutInflater.from(context).inflate(R.layout.my_button, this,true); 

       this.textView1 = (TextView)findViewById(R.id.textview1); 
       this.textView2 = (TextView)findViewById(R.id.textview2); 

        this.setClickable(true); 
        this.setFocusable(true);         
 } 

} 

3 接下来就很简单了,只需在xml文件中调用自己写的MyButton即可。

<com.test.MyButton
android:id="@+id/bt1"
android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:background="@drawable/button_bg" 
/>

也可以用过Activity来修改TextView中字。

     myButton = (MyButton)this.findViewById(R.id.exception);
     myButton .textView1.setText(“ 欧也”); 
     myButton .textView2.setText(“ 第二篇blog”); 

效果图如下:
Android--在一个Button上显示不同类型的字体_第3张图片

用相同的方法,就可以设计出各种各样的Button。

你可能感兴趣的:(UI,Android,XML)