我正在尝试设计一个与上图非常相似的用户界面(UI)。我已经成功设计了几乎与上图相似的UI,但是我无法找到一种实现倾斜部分的方法。
1)有人能给出一个示例布局,说明如何实现倾斜布局吗?
2)我该如何将FAB放在倾斜部分的正上方?
非常感谢您的任何帮助。
我正在尝试设计一个与上图非常相似的用户界面(UI)。我已经成功设计了几乎与上图相似的UI,但是我无法找到一种实现倾斜部分的方法。
1)有人能给出一个示例布局,说明如何实现倾斜布局吗?
2)我该如何将FAB放在倾斜部分的正上方?
非常感谢您的任何帮助。
您可以使用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);
}
}
<com.pix.app.views.SlantView
android:layout_width="match_parent"
android:layout_height="30dp"
android:id="@+id/slant_view"
/>
<TextView/>
实现斜视图的另一种方法如下:
<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>
1) 有没有人能给出一个实现斜向布局的示例布局?
你不可以。视图总是矩形的。但你可以通过使用背景图片使其看起来是斜的。
2) 我该如何将 FAB 放在斜向部分的正上方?
你无法拥有斜向部分。它只是正方形边框的底部边缘。因此,你应该能够毫无问题地将其放在那里。
android:rotation = "45"
2) 对于FAB,只需将其移动到切割点,根据您的截图,布局的重力应设置为右侧。
希望这可以帮助。干杯!
你需要编写一个自定义的视图来实现这个功能。没有原生控件可以做到这一点。
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();
}
}