Question

Slant UI

我正在尝试设计一个与此非常相似的UI。我能够设计它几乎与上面的图像类似，但我没有办法实现倾斜或倾斜的部分。

1）任何人都可以举例说明如何实现倾斜布局？

2）如何将FAB放在倾斜部分上？

任何帮助都会非常感激。

Answer 1

您可以使用Canvas使用Slant top创建自定义视图，然后将其放在textView上，以实现此外观。

Code snippet for slant top custom view :-

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-----/>

Answer 2

1）任何人都可以举例说明如何实现倾斜布局？

你做不到。视图始终是矩形的。但是，您可以使其看起来倾斜，即使用背景图像。

2）如何将FAB放在倾斜部分上？

你不能倾斜。它只是方形边框的底边。所以你应该能够把它放在那里没有任何问题。

Answer 3

通常，图像以矩形表示。您可以根据需要使用填充/边距来设计UI。显然，除了倾斜的部分将是透明的图像。

Answer 4

您必须编写自定义视图才能执行此操作。没有本机控制可以做到这一点。

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();
   }

}

Answer 5

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

1）对于图像部分，您可以使用普通的ImageView来显示图像。在此之下，您可以拥有 LinearLayout （空白，背景为白色）。

现在只需将空白LinearLayout倾斜到可能 45度的角度即可以倾斜样式切割背景图像。在这里，只需设置空白LinearLayout的XML属性，

android:rotation = "45"

2）对于FAB，只需将其移动到切割点，布局的重力应根据您的屏幕截图设置为正确。

希望这会有所帮助。干杯！

Answer 6

实现“倾斜视图”的其他方法是：

<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>

这将为您提供以下输出：

Android中的倾斜或倾斜UI设计

6 个答案: