平行四边形UI

时间:2018-06-12 09:52:45

标签: android android-layout android-fragments

如何在Android Studio中制作菜单屏幕,其中3个平行四边形的颜色不同,当您单击其中一个时,会打开一个新页面。我不一定在寻找编码解决方案,我更愿意自己理解这个概念,并想出一些代码。

enter image description here

1 个答案:

答案 0 :(得分:2)

您可以创建自定义形状的平行四边形。创建一个xml parallelogram.xml并将其保存在drawable中。

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<!-- Colored rectangle-->
<item>
    <shape android:shape="rectangle">
        <size
            android:width="100dp"
            android:height="40dp" />
        <solid android:color="#ff0000" />
    </shape>
</item>

<!-- This rectangle for the left side -->
<!-- Its color should be the same as layout's background -->
<item
    android:bottom="-100dp"
    android:left="-100dp"
    android:right="100dp"
    android:top="-100dp">
    <rotate android:fromDegrees="45">
        <shape android:shape="rectangle">
            <solid android:color="#ffffff" />
        </shape>
    </rotate>
</item>

<!-- This rectangle for the right side -->
<!-- Their color should be the same as layout's background -->
<item
    android:bottom="-100dp"
    android:left="100dp"
    android:right="-100dp"
    android:top="-100dp">
    <rotate android:fromDegrees="45">
        <shape android:shape="rectangle">
            <solid android:color="#ffffff" />
        </shape>
    </rotate>
</item>

接下来在你的布局xml中使用它就像这样

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:gravity="center"
android:orientation="vertical"
tools:context=".others.ActivityHome"
android:background="#fff">

<View
    android:id="@+id/parallelogram1"
    android:layout_width="100dp"
    android:layout_height="40dp"
    android:layout_centerInParent="true"
    android:layout_gravity="center"
    android:layout_margin="50dp"
    android:background="@drawable/parallelogram" />

<View
    android:id="@+id/parallelogram2"
    android:layout_width="100dp"
    android:layout_height="40dp"
    android:layout_centerInParent="true"
    android:layout_gravity="center"
    android:layout_margin="50dp"
    android:background="@drawable/parallelogram" />


<View
    android:id="@+id/parallelogram3"
    android:layout_width="100dp"
    android:layout_height="40dp"
    android:layout_centerInParent="true"
    android:layout_gravity="center"
    android:layout_margin="50dp"
    android:background="@drawable/parallelogram" />


</LinearLayout>

最后在您的活动中初始化您的视图并设置onclick方法,如下所示:

public class ActivityHome extends AppCompatActivity {

private View parallelogram1, parallelogram2, parallelogram3;

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

    parallelogram1 = (View) findViewById(R.id.parallelogram1);
    parallelogram2 = (View) findViewById(R.id.parallelogram2);
    parallelogram3 = (View) findViewById(R.id.parallelogram3);

    parallelogram1.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Intent intent = new Intent(ActivityHome.this, ActivityOne.class);
            startActivity(intent);
        }
    });

    parallelogram2.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Intent intent = new Intent(ActivityHome.this, ActivityTwo.class);
            startActivity(intent);
        }
    });

    parallelogram3.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Intent intent = new Intent(ActivityHome.this, ActivityThree.class);
            startActivity(intent);[enter image description here][1]
        }
    });
}
}