自定义视图，用不同的子视图对角分割布局 [英] Custom view that splits layout diagonally with different child views

问题描述

我怎样才能将 LinearLayout 或 RelativeLayout 对角分割成两个不同的大小，每个都有不同的子视图.上半部分的示例 ViewPager 和下半部分的不同 LinearLayout.

类似这样的:

我怎样才能做到这一点?请帮忙

解决方案

最简单的方法是制作带有倾斜剪切的背景图像.如果您希望拥有动态布局并且想要真正剪切小部件，请使用 Canvas.saveLayer/restore.像这样:

private Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);私有 Xfermode pdMode = new PorterDuffXfermode(PorterDuff.Mode.CLEAR);私有路径 path = new Path();受保护的无效dispatchDraw(帆布画布){int saveCount = canvas.saveLayer(0, 0, getWidth(), getHeight(), null, Canvas.ALL_SAVE_FLAG);super.dispatchDraw(画布);paint.setXfermode(pdMode);path.reset();path.moveTo(0, getHeight());path.lineTo(getWidth(), getHeight());path.lineTo(getWidth(), getHeight() - TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50, getResources().getDisplayMetrics()));path.close();canvas.drawPath(路径，油漆)；canvas.restoreToCount(saveCount);paint.setXfermode(null);}

要点:

顺便说一句.这东西最近很流行:)

How can i split LinearLayout or RelativeLayout diagonally into two varying sizes and each having different child view. Example ViewPager in upper half section and a different LinearLayout in bottom section.

something like this :

How can i achieve this? Please help

解决方案

The easiest approach is to just make a background image with that skewed cut. If you wish to have a dynamic layout and you want to really cut widgets, use Canvas.saveLayer/restore. Like this:

private Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
private Xfermode pdMode = new PorterDuffXfermode(PorterDuff.Mode.CLEAR);
private Path path = new Path();

protected void dispatchDraw(Canvas canvas) {
    int saveCount = canvas.saveLayer(0, 0, getWidth(), getHeight(), null, Canvas.ALL_SAVE_FLAG);
    super.dispatchDraw(canvas);

    paint.setXfermode(pdMode);
    path.reset();
    path.moveTo(0, getHeight());
    path.lineTo(getWidth(), getHeight());
    path.lineTo(getWidth(), getHeight() - TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50, getResources().getDisplayMetrics()));
    path.close();
    canvas.drawPath(path, paint);

    canvas.restoreToCount(saveCount);
    paint.setXfermode(null);
}

Gist: https://gist.github.com/ZieIony/8480b2d335c1aeb51167

<?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:orientation="vertical"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/activity_main">

    <com.example.marcin.splitlayout.CutLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:scaleType="centerCrop"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/mazda" />


    </com.example.marcin.splitlayout.CutLayout>

    <TextView
        android:layout_margin="16dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Mazda 3" />

</LinearLayout>

Btw. This thing is very popular recently :)

这篇关于自定义视图，用不同的子视图对角分割布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！