每侧有两种颜色的按钮

时间:2016-06-20 11:00:13

标签: android android-layout button customization android-custom-view

Sample

是否可以使用这种颜色方案制作自定义按钮,其中一种颜色位于右侧,另一种颜色位于左侧。

在我以前的搜索中,我只能找到如何制作按钮渐变,这不是我需要的那种颜色

是否可以根据我给出的样品并排制作两种颜色的按钮?

2 个答案:

答案 0 :(得分:0)

您可以使用LinearLayout作为按钮以更复杂的方式执行此操作。 简单的例子:

使用LinearLayout按钮的XML文件:

<LinearLayout android:id="@+id/sophisticated_button"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="150dp">

    <LinearLayout
        android:background="#333333"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:gravity="center"
        android:layout_weight="1">

        <ImageView
            android:layout_width="66dp"
            android:layout_height="66dp"
            android:src="@drawable/present"/>

    </LinearLayout>

    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="2"
        android:gravity="center"
        android:text="SEND A GIFT \n TO A FRIEND"/>

</LinearLayout>

其中present表示位于drawable目录中的Image。

按钮所在的活动如下所示:

public class MainActivity extends Activity implements View.OnClickListener {

    private LinearLayout buttonLinearLayout;

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

        buttonLinearLayout = (LinearLayout)findViewById(R.id.sophisticated_button);
        buttonLinearLayout.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.sophisticated_button:
                Toast.makeText(getApplicationContext(), "Sophisticated Button Pressed", Toast.LENGTH_LONG).show();
                break;
        }
    }
}

输出:

Sophisticated Button Using LinearLayout

答案 1 :(得分:0)

.header {
  height: 100px;
  overflow: visible;
  padding: 0px;
}

.row {
  position: relative;
  width: 94.44444%;
  margin: 0 auto;
  max-width: 100%;
}

.logo {
  display: inline-block;
  width: auto;
  float: left;
}

.main-menu {
  position: relative;
}

.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
}

.menu > li {
  float: left;
  margin: 0;
  padding: 0;
  position: relative;
  cursor: pointer;
  display: list-item;
  text-align: match-parent;
  padding-right: 11px;
}
.menu > li {
  float: none;
  display: inline-block;
}

.menu > li > a {
  font-size: 11px;
  display: block;
  box-sizing: content-box;
}

.menu-center {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
}

.menu-right {
  float: right;
}