Android: 如何正确创建包含在单个视觉元素中的按钮?
Android: How correctly to create buttons which are incorporated in a single visual element?
我收到这样的布局:
如何在不使用自定义视图的情况下正确地制作这样的内容?或者这是解决问题的唯一方法?我不确定这个设计解决方案是如何命名的,所以 Google 没有太大帮助。
我强烈希望以最标准的方式对其进行编程,使其成为可以应用于标准小部件的主题
试试这个
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="@+id/linearTop"
android:padding="20dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="140dp"
android:layout_weight="1"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_margin="2dp"
android:background="@drawable/test"
android:text="button 1" />
<Button
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_margin="2dp"
android:background="@drawable/test"
android:text="button 1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="130dp"
android:layout_weight="1"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/test"
android:text="button 1" />
</LinearLayout>
</LinearLayout>
<android.support.v7.widget.CardView
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginTop="-20dp"
android:background="#ffffff"
android:padding="10dp"
app:cardCornerRadius="50dp"
app:cardUseCompatPadding="true"
app:layout_anchor="@id/linearTop"
app:layout_anchorGravity="center">
<android.support.design.widget.FloatingActionButton
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_margin="10dp"
android:backgroundTint="#de0606"
android:scaleType="fitXY"
android:src="@drawable/ic_dot" />
</android.support.v7.widget.CardView>
</android.support.design.widget.CoordinatorLayout>
@drawable/ic_dot
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:fillColor="#de0606"
android:pathData="M12,12m-10,0a10,10 0,1 1,20 0a10,10 0,1 1,-20 0"/>
</vector>
android:background="@drawable/test"
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#06892b" />
<corners android:radius="20dp" />
</shape>
输出
我收到这样的布局:
如何在不使用自定义视图的情况下正确地制作这样的内容?或者这是解决问题的唯一方法?我不确定这个设计解决方案是如何命名的,所以 Google 没有太大帮助。
我强烈希望以最标准的方式对其进行编程,使其成为可以应用于标准小部件的主题
试试这个
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="@+id/linearTop"
android:padding="20dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="140dp"
android:layout_weight="1"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_margin="2dp"
android:background="@drawable/test"
android:text="button 1" />
<Button
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_margin="2dp"
android:background="@drawable/test"
android:text="button 1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="130dp"
android:layout_weight="1"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/test"
android:text="button 1" />
</LinearLayout>
</LinearLayout>
<android.support.v7.widget.CardView
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginTop="-20dp"
android:background="#ffffff"
android:padding="10dp"
app:cardCornerRadius="50dp"
app:cardUseCompatPadding="true"
app:layout_anchor="@id/linearTop"
app:layout_anchorGravity="center">
<android.support.design.widget.FloatingActionButton
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_margin="10dp"
android:backgroundTint="#de0606"
android:scaleType="fitXY"
android:src="@drawable/ic_dot" />
</android.support.v7.widget.CardView>
</android.support.design.widget.CoordinatorLayout>
@drawable/ic_dot
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:fillColor="#de0606"
android:pathData="M12,12m-10,0a10,10 0,1 1,20 0a10,10 0,1 1,-20 0"/>
</vector>
android:background="@drawable/test"
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#06892b" />
<corners android:radius="20dp" />
</shape>
输出