安卓中的倾斜或倾斜式UI设计

Question

我正在尝试设计一个与上图非常相似的用户界面(UI)。我已经成功设计了几乎与上图相似的UI，但是我无法找到一种实现倾斜部分的方法。

1）有人能给出一个示例布局，说明如何实现倾斜布局吗？

2）我该如何将FAB放在倾斜部分的正上方？

非常感谢您的任何帮助。

- Aritra Roy

Answer 1

您可以使用Canvas创建一个自定义倾斜顶部视图，然后将其放置在您的TextView上，以实现这种外观和感觉。

倾斜顶部自定义视图的代码片段：

public class SlantView extends View {
    private Context mContext;
    Paint paint ;
    Path path;

    public SlantView(Context ctx, AttributeSet attrs) {
        super(ctx, attrs);
        mContext = ctx;
        setWillNotDraw(false);
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    }

    @Override
    protected void onDraw(Canvas canvas) {

        int w = getWidth(), h = getHeight();
        paint.setStrokeWidth(2);
        paint.setColor(Color.WHITE);
        paint.setStyle(Paint.Style.FILL_AND_STROKE);
        paint.setAntiAlias(true);

        path = new Path();
        path.setFillType(Path.FillType.EVEN_ODD);
        path.moveTo(0,0);
        path.lineTo(0,h);
        path.lineTo(w,h);
        path.close();
        canvas.drawPath(path, paint);
    }
}

如何在TextView中使用的代码片段

<com.pix.app.views.SlantView
   android:layout_width="match_parent"
   android:layout_height="30dp"
   android:id="@+id/slant_view"
 />

 <TextView/>

- CoolCoder

---

简单而有效！ - emen

Answer 2

实现斜视图的另一种方法如下：

<FrameLayout android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:background="@color/colorAccent"
    xmlns:android="http://schemas.android.com/apk/res/android" >

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="280dp"
        android:src="@color/colorPrimary"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:rotation="-70"
        android:layout_marginTop="100dp"
        android:background="@color/colorAccent"></LinearLayout>
</FrameLayout>

这将会给你以下输出结果：

- Aanal Shah

---

更好的解决方案 - Sajad Bin Nazir

Answer 3

1) 有没有人能给出一个实现斜向布局的示例布局？

你不可以。视图总是矩形的。但你可以通过使用背景图片使其看起来是斜的。

2) 我该如何将 FAB 放在斜向部分的正上方？

你无法拥有斜向部分。它只是正方形边框的底部边缘。因此，你应该能够毫无问题地将其放在那里。

- Marcin Orlowski

---

我理解了。你能提供一个示例布局来复制这个吗？ - Aritra Roy

Answer 4

你需要将根布局或至少是直接父布局设置为 FrameLayout，然后，

1）对于图像部分，您可以使用普通的 ImageView 显示图像。在下面，您可以有一个带有白色背景的空白 LinearLayout。

现在只需将空白 LinearLayout 倾斜一个角度，可能是 45 度，以斜角方式裁剪背景图像。在这里，只需设置空白 LinearLayout 的 XML 属性，

android:rotation = "45"

2) 对于FAB，只需将其移动到切割点，根据您的截图，布局的重力应设置为右侧。

希望这可以帮助。干杯！

- Rahul Chowdhury

---

我尝试过，但对我来说不起作用。你能提供一个可行的示例吗？ - Aritra Roy

Answer 5

通常，图像以矩形形式表示。您可以使用填充/边距来根据需要设计用户界面。显然，斜坡部分以外的部分将是透明图像。

- Ameer Moaaviah

Answer 6

你需要编写一个自定义的视图来实现这个功能。没有原生控件可以做到这一点。

Canvas提供了对剪辑路径的支持，因此只要能够绘制图像，就可以很容易地剪辑图像。话虽如此，在OnDraw实现中绘制大型图像并不直接（内存管理、正确的缩放和缓存行为并不困难，但也不是微不足道的）。

更简单的方法是扩展类似FrameLayout或某种ViewGroup的控件。如果你重写dispatchDraw方法，可以将剪辑路径应用于画布，从而剪辑子元素。然后，你可以在自定义控件中放置其他控件。

类似于以下代码：

public class ClipFrameLayout extends FrameLayout {
  .... constructors and stuff...
   @Override 
   void dispatchDraw(Canvas canvas)
   {
      canvas.save();
      canvas.clipPath(mCustomClipPath);
      super.dispatchDraw(canvas);
      canvas.restore();
   }

}

- Robin Davies

---

不需要自定义视图，可以使用自定义可绘制对象轻松实现，并且可以在任何地方重复使用。 - pskink