2015-05-13 48 views
1

如何修改小矩形,使它們變成灰色並且圍繞它們具有紅色邊框,就像在此圖像中一樣?這是我的代碼。我試過這樣做,但我的矩形只顯示爲紅色。我需要它們也是等距的。另外,是否可以使用重量來定義寬度和高度而不是像素?帶邊框的視圖

enter image description here

代碼

<RelativeLayout 
     android:layout_width="0dp" 
     android:layout_height="match_parent" 
     android:layout_weight="1" 
     android:background="#808080" > 

     <View 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_alignParentLeft="true" 
      android:background="@android:color/red" /> 

     <View 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_centerHorizontal="true" 
      android:background="@android:color/red"/> 

     <View 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_alignParentRight="true" 
      android:background="@android:color/red" /> 

     <View 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_alignParentBottom="true" 
      android:layout_alignParentLeft="true" 
      android:background="@android:color/red" /> 

     <View 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_alignParentBottom="true" 
      android:layout_centerHorizontal="true" 
      android:background="@android:color/red" /> 

     <View 
      android:layout_width="10dp" 
      android:layout_height="10dp" 
      android:layout_alignParentBottom="true" 
      android:layout_alignParentRight="true" 
      android:background="@android:color/red" /> 
    </RelativeLayout> 

回答

1

這是如何做到這一點粗略的例子。 這是您將使用的drawable。 我將它命名爲emptyrect。將其保存到繪圖文件夾中。

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

<solid android:color="#808080" /> 

<stroke 
    android:width="1dp" 
    android:color="#FF0000" /> 

</shape> 

接下來是您的佈局。

它使用100重力的寬度。 每個emptyrect使用100重力中的20個。 有2個線性佈局。 1頂部對齊,另一個底部對齊。

GL

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:background="#808080" > 

<LinearLayout 
    android:layout_width="fill_parent" 
    android:layout_height="50dp" 
    android:orientation="horizonal" 
    android:weightSum="100" > 

    <View 
     android:layout_width="0dp" 
     android:layout_height="match_parent" 
     android:layout_weight="20" 
     android:background="@drawable/emptyrect" /> 

    <View 
     android:layout_width="1dp" 
     android:layout_height="0dp" 
     android:layout_weight="7" /> 

    <View 
     android:layout_width="0dp" 
     android:layout_height="match_parent" 
     android:layout_weight="20" 
     android:background="@drawable/emptyrect" /> 

    <View 
     android:layout_width="1dp" 
     android:layout_height="0dp" 
     android:layout_weight="6" /> 

    <View 
     android:layout_width="0dp" 
     android:layout_height="match_parent" 
     android:layout_weight="20" 
     android:background="@drawable/emptyrect" /> 

    <View 
     android:layout_width="1dp" 
     android:layout_height="0dp" 
     android:layout_weight="7" /> 

    <View 
     android:layout_width="0dp" 
     android:layout_height="match_parent" 
     android:layout_weight="20" 
     android:background="@drawable/emptyrect" /> 
</LinearLayout> 

<LinearLayout 
    android:layout_width="fill_parent" 
    android:layout_height="50dp" 
    android:layout_alignParentBottom="true" 
    android:orientation="horizontal" 
    android:weightSum="100" > 

    <View 
     android:layout_width="0dp" 
     android:layout_height="match_parent" 
     android:layout_weight="20" 
     android:background="@drawable/emptyrect" /> 

    <View 
     android:layout_width="1dp" 
     android:layout_height="0dp" 
     android:layout_weight="7" /> 

    <View 
     android:layout_width="0dp" 
     android:layout_height="match_parent" 
     android:layout_weight="20" 
     android:background="@drawable/emptyrect" /> 

    <View 
     android:layout_width="1dp" 
     android:layout_height="0dp" 
     android:layout_weight="6" /> 

    <View 
     android:layout_width="0dp" 
     android:layout_height="match_parent" 
     android:layout_weight="20" 
     android:background="@drawable/emptyrect" /> 

    <View 
     android:layout_width="1dp" 
     android:layout_height="0dp" 
     android:layout_weight="7" /> 

    <View 
     android:layout_width="0dp" 
     android:layout_height="match_parent" 
     android:layout_weight="20" 
     android:background="@drawable/emptyrect" /> 
</LinearLayout> 

1

您將要創建一個形狀繪製。這裏是我如何做一個橙色bg的黑色邊框,所以你只需要修改任何你需要的顏色和大小。

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

    // solid fills in the shape with the color you want 
    <solid android:color="@drawable/orange" /> 

    // stroke gives the outline with the specified width and color 
    <stroke 
     android:width="3px" 
     android:color="@drawable/black" /> 

</shape> 

你可以使用<size>來告訴它你想要它們有多大。

Shape drawable docs

另外是有可能使用權重來定義寬度和高度,而不是像素?

你可以做一個或另一個讓他們有相同的大小和間隔,但你需要將其更改爲LinearLayout

無需重寫所有的代碼,你可以有像

<RelativeLayout 
    // vertical orientation> 
    <LinearLayout 
     // horizontal orientation 
     // width of 'match_parent' 
     // height of wrap_content 
     alignParentTop = true> 
     <View 
      //weight of maybe 1 
      // width of '0' 
      // height of wrap_content/> 
     // maybe need an empty view in between each 
     <View 
      //weight of maybe .2 
      // width of '0' 
      // height of wrap_content/> 
     // continue for all of your Views 
    </LinearLayout> 
    <LinearLayout 
     // horizontal orientation 
     // width of 'match_parent' 
     // height of wrap_content 
     alignParentBottom = true> 
     <View 
      //weight of maybe 1 
      // width of '0' 
      // height of wrap_content/> 
     // maybe need an empty view in between each 
     <View 
      //weight of maybe .2 
      // width of '0' 
      // height of wrap_content/> 
     // continue for all of your Views 
    </LinearLayout> 
</RelativeLayout> 
0
<View 
    android:layout_width="100dp" 
    android:layout_height="100dp" 
    android:background="@drawable/border" /> 

border.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="rectangle" > 

<corners 
    android:bottomLeftRadius="2dp" 
    android:bottomRightRadius="2dp" 
    android:radius="2dp" 
    android:topRightRadius="2dp" /> 

<gradient 
    android:endColor="#707070" 
    android:startColor="#707070" /> 

<stroke 
    android:width="1dp" 
    android:color="#FF0000" /> 

<padding 
    android:bottom="2dip" 
    android:left="2dip" 
    android:right="2dip" 
    android:top="2dip" /> 

</shape> 
1

的筆觸屬性:

<stroke 
     android:width="4dp" 
     android:color="@color/red" /> 

行程僅能在<shape>HERE</shape>

使用,你可以添加一個新的mybackground。XML文件,並把它添加到您的drawble文件夾 XML文件將包含以下內容:

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

    <solid android:color="#77000000" /> 

    <corners android:radius="10dip" /> 

    <gradient 
     android:angle="-90" 
     android:endColor="#44FF0000" 
     android:startColor="#CCFF0000" /> 

    <padding 
     android:bottom="10dip" 
     android:left="10dip" 
     android:right="10dip" 
     android:top="10dip" /> 

    <stroke 
     android:width="1dip" 
     android:color="#000000" > 
    </stroke> 

</shape> 
現在

而不是做: android:background="@android:color/red"你可以做

android:background="@drawable/mybackground" 

(順便說一句角落,漸變和填充屬性只是在那裏,所以你會知道還有什麼可以做)

我希望這可以幫助:)