如何将单面边框和背景添加到一个drawable中?

时间:2014-11-02 03:52:41

标签: java android xml imagebutton

我有一个ImageButton并且在android:background属性中我有一个xml drawable,它会在按下时更改ImageButton背景颜色。这一切都很好,但我也希望为这些ImageButton中的每一个添加一个顶部边框。

这是我创建的示例图片,以便更好地理解我的观点。 这些按钮也将具有一个活动状态,指示当前活动按钮,我可以使用Java代码将其设置为drawable。

enter image description here

4 个答案:

答案 0 :(得分:1)

您可以使用多个drawable来完成工作。您可以使用顶部边框绘制图标/图像,而不使用顶部边框,并使用setBackgroundResource方法切换图像背景。 (我相信你想要显示带有顶部边框的图像作为当前选择的工具图标,对吧?)。

当您要构建多个像工具箱这样的图像按钮时,您必须确保其选择状态得到正确控制。如果选择了一个图像按钮,则所有其他图像按钮都应显示未选择的可绘制按钮。

我把一些代码汇总在一起并构建了这个小例子。希望你能发现它有用。

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final ImageButton imButton1 = (ImageButton) findViewById(R.id.imButton1);
        final ImageButton imButton2 = (ImageButton) findViewById(R.id.imButton2);
        final ImageButton imButton3 = (ImageButton) findViewById(R.id.imButton3);

        imButton1.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) 
            {   
                imButton1.setBackgroundResource(R.drawable.icon1_selected);
                imButton2.setBackgroundResource(R.drawable.icon2_unselected);
                imButton3.setBackgroundResource(R.drawable.icon3_unselected);
            }
        });

        imButton2.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) 
            {   
                imButton1.setBackgroundResource(R.drawable.icon1_unselected);
                imButton2.setBackgroundResource(R.drawable.icon2_selected);
                imButton3.setBackgroundResource(R.drawable.icon3_unselected);
            }
        });

        imButton3.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) 
            {   
                imButton1.setBackgroundResource(R.drawable.icon1_unselected);
                imButton2.setBackgroundResource(R.drawable.icon2_unselected);
                imButton3.setBackgroundResource(R.drawable.icon3_selected);
            }
        });
    }
}

这就是它的布局:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#bbb"
    tools:context="${packageName}.${activityClass}" >

    <ImageButton
        android:id="@+id/imButton1"
        android:layout_toLeftOf="@+id/imButton2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="0dp"
        android:layout_alignTop="@+id/imButton2"
        android:background="@drawable/icon1_unselected" />

    <ImageButton
        android:id="@id/imButton2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="23dp"
        android:layout_alignParentTop="true"
        android:background="@drawable/icon2_selected" />

    <ImageButton
        android:id="@+id/imButton3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/imButton2"
        android:layout_toRightOf="@id/imButton2"
        android:background="@drawable/icon3_unselected" />

</RelativeLayout>

图像按钮的屏幕截图。

enter image description here enter image description here enter image description here

希望这有帮助。

答案 1 :(得分:0)

我通过创建两个单独的可绘制xml文件解决了这个问题,其中一个具有顶部边框和白色背景,另一个具有相同的颜色边框和灰色背景。然后在selector xml文件中,我所要做的就是将每个xml文件分配到各自的状态并解决问题。 :)

答案 2 :(得分:0)

试试这个

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:left="-6dp"
        android:right="-6dp"
        android:bottom="-6dp">
        <shape>
            <stroke
                android:width="5dp"
                android:color="#6c6c6c" />

            <solid android:color="#FFFFFF" />
        </shape>
    </item>

</layer-list>

答案 3 :(得分:0)

嘿,你可以使用这样的边框视图,你把它放在你的图像视图的所有方面然后你可以看到,

 <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#000" />

你想要使用的颜色。感谢