如何实现在Android的UI这样？ [英] How to achieve this UI in Android?

问题描述

在我的应用程序之一，我需要建立一个边境的线性布局，看起来像下面

In one of my applications, i need to create a border for a linear layout which would look like below

我不希望有一个形象，并设置为背景。因为这样我就需要为不同的设备创建各种尺寸的图像。

I do not want to have an image and set it as background. Because then i would need to create images of various size for different devices.

如果我创建一个线性布局的布局和使用绝对定位放置一个TextView，它可能无法按预期在不同的设备。

If i create the layout with a linear layout and place a textview using absolute positioning, it might not look as expected in different devices.

那么，什么是实现这个UI的最佳方式？

So What is the best way to achieve this UI ?

推荐答案

试试这个

main_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_margin="10dp"
            android:background="@drawable/Layout_selector"
            android:orientation="vertical" >
        </LinearLayout>

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="MyText"
            android:layout_marginLeft="50dp"
            android:padding="1dp"
            android:background="#fff"
            android:textAppearance="?android:attr/textAppearanceMedium" />

    </FrameLayout>

</LinearLayout>

在绘制对象的 Layout_selector.xml

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

    <item android:state_enabled="true"
            android:state_pressed="true">
        <shape android:padding="5dp" android:shape="rectangle">
            <solid android:color="#FFF" />
            <stroke android:width="0.5dp" android:color="#29166f" />
            <corners android:bottomLeftRadius="10dp" android:bottomRightRadius="10dp" android:topLeftRadius="10dp" android:topRightRadius="10dp" />
        </shape>
    </item>
    <item android:state_enabled="true" android:state_focused="true">
        <shape android:padding="5dp" android:shape="rectangle">
            <solid android:color="#FFF" />
            <stroke android:width="0.5dp" android:color="#29166f" />
            <corners android:bottomLeftRadius="10dp" android:bottomRightRadius="10dp" android:topLeftRadius="10dp" android:topRightRadius="10dp" />
        </shape>
    </item>
    <item android:state_enabled="true">
        <shape android:padding="5dp"
            android:shape="rectangle">
            <solid android:color="#FFF" /> 
            <stroke android:width="0.5dp" android:color="#29166f" />
            <corners android:bottomLeftRadius="10dp" android:bottomRightRadius="10dp" android:topLeftRadius="10dp" android:topRightRadius="10dp" />
        </shape>
    </item>

</selector>

输出是：

这篇关于如何实现在Android的UI这样？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！