Question

我正在尝试使用与使用线性布局的iPhone的Jeepsing应用程序相同的方式在Android中创建按钮，但没有成功。我得到的最大值是三个相同大小的分隔按钮。我需要三个没有背景的按钮，当它们中的两个有一个圆角时，只有它们的边框分开，如下面的屏幕截图所示：

enter image description here

这是我的最后一次尝试：

<LinearLayout android:id="@+id/LinearLayout02" android:layout_height="wrap_content" android:layout_width="match_parent">
    <Button android:id="@+id/Button04" android:text="Button" android:layout_width="0dp" android:layout_weight="1" android:layout_height="wrap_content"></Button>
    <Button android:id="@+id/Button05" android:text="Button" android:layout_width="0dp" android:layout_weight="1" android:layout_height="wrap_content"></Button>
    <Button android:id="@+id/Button06" android:text="Button" android:layout_width="0dp" android:layout_weight="1" android:layout_height="wrap_content"></Button>
</LinearLayout>

我也尝试过GridLayout但没有成功。

Answer 1

只需为按下/释放效果创建具有角半径的形状..

<solid android:color="#77000000" />

<corners android:radius="10dip" />

<gradient
    android:angle="-90"
    android:endColor="#44FF0000"
    android:startColor="#CCFF0000" />

<padding
    android:bottom="10dip"
    android:left="10dip"
    android:right="10dip"
    android:top="10dip" />

<stroke
    android:width="1dip"
    android:color="#000000" >
</stroke>

有关形状的更多信息，请参阅this

为按下/释放效果创建形状后，为按钮选择器创建一个XML文件，如下面的示例

<selector
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_pressed="true"
        android:drawable="@drawable/prs_arrival_fb_btn" /> <!-- pressed -->
    <item
        android:state_focused="true"
        android:drawable="@drawable/prs_arrival_fb_btn" /> <!-- focused -->
    <item
        android:drawable="@drawable/arrival_fb_content_btn" /> <!-- default -->
</selector>

然后将此选择器设置为您的按钮作为背景..如下例...

<Button android:text="Play" android:id="@+id/playBtn"
            android:background="@drawable/button_selector"
            android:textColor="#ffffff" />

Answer 2

这就是我实现它的方式：

up_left_button_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/up_left_button_shape_pressed"
      android:state_pressed="true" />
    <item android:drawable="@drawable/up_left_button_shape_pressed"
      android:state_selected="true" />
    <item android:drawable="@drawable/up_left_button_shape_released" />
</selector>

up_left_button_shape_pressed.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
    android:startColor="#ff0000ff"
    android:endColor="#ff0000ff"
    android:angle="45"/>
<padding android:left="0dp"
    android:top="0dp"
    android:right="0dp"
    android:bottom="0dp" />
<corners android:radius="8dp" 
  android:bottomRightRadius="0dp" android:bottomLeftRadius="0dp" 
  android:topLeftRadius="8dp" android:topRightRadius="0dp"/>
<stroke android:width="2dp" android:color="#ff444444"/>
</shape>

up_center_button_shape_released.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
    android:startColor="#00000000"
    android:endColor="#00000000"
    android:angle="45"/>
<padding android:left="0dp"
    android:top="0dp"
    android:right="0dp"
    android:bottom="0dp" />
<corners android:radius="8dp" 
  android:bottomRightRadius="0dp" android:bottomLeftRadius="0dp" 
  android:topLeftRadius="8dp" android:topRightRadius="0dp"/>
<stroke android:width="2dp" android:color="#ff444444"/>
</shape>

中心和右键的形状是一样的，只需要与哪个角落进行对比即可。

最后是视图布局：

<TableRow android:id="@+id/buttonsRow"
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content"
    android:paddingTop="10dp">
    <RelativeLayout  android:id="@+id/buttonsRowRelativeLayout" 
        android:layout_height="wrap_content" 
        android:layout_width="match_parent">

    <Button
        android:id="@+id/leftButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/save"
        android:textColor="#ffffffff"
        android:background="@drawable/up_left_button_selector"
        android:layout_toLeftOf="@+id/centerButton" />
    <Button
        android:id="@+id/centerButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/change"
        android:textColor="#ffffffff"
        android:background="@drawable/up_center_button_selector" 
        android:layout_centerHorizontal="true"/>
    <Button
        android:id="@+id/rightButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/send"
        android:textColor="#ffffffff"
        android:background="@drawable/up_right_button_selector"
        android:layout_toRightOf="@+id/centerButton" />
    </RelativeLayout >      
</TableRow>

它看起来很不错。

按钮的设计就像在Jeepsing中一样

2 个答案: