2014-04-16 40 views
0

2个文本我需要创建一个类似如下的组件:的Android CustomView里面

enter image description here

而且我真的不知道如何处理这一点。我正在考虑创建一个自定义的TextView组件(扩展TextView的类),但我不知道该从哪里做什么。

感谢您的答复,这是我解决

<LinearLayout 
      android:layout_width="@dimen/size_profile_pic" 
      android:layout_height="@dimen/size_profile_pic" 
      android:id="@+id/playedCounter" 
      android:orientation="vertical" 
      android:background="@drawable/layout_border" 
      android:layout_gravity="center_vertical" 
      android:weightSum="4"> 

      <TextView 
       android:id="@+id/times_played_txt" 
       android:layout_width="match_parent" 
       android:layout_height="0dp" 
       android:layout_weight="2.5" 
       android:text="18" 
       android:textStyle="bold" 
       android:gravity="center" 
       android:textSize="30sp" /> 

      <View 
       android:layout_width="match_parent" 
       android:layout_height="2dp" 
       android:background="@android:color/black" /> 

      <TextView 
       android:layout_width="match_parent" 
       android:layout_height="0dp" 
       android:layout_weight="1.5" 
       android:text="Played" 
       android:gravity="center" /> 

     </LinearLayout> 
+0

为什么'自定义TextView'? –

+0

该号码需要动态设置,“播放”文本是静态的,但需要更新号码。 –

+2

那又如何?具有黑色边框和垂直方向的线性布局具有2个文本视图,第一个将动态设置数字,第二个使用字符串播放进行固定。一个高度为2dp,颜色为黑色的textview,两者之间没有任何文字。而已。 –

回答

1

试试这个代码:

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:background="@android:color/white"> 

    <RelativeLayout 
     android:layout_width="150dp" 
     android:layout_height="150dp" 
     android:layout_alignParentTop="true" 
     android:layout_centerHorizontal="true" 
     android:layout_marginTop="162dp" 
     android:background="@drawable/style" 
     android:orientation="vertical" > 

     <TextView 
      android:id="@+id/textView1" 
      android:layout_width="fill_parent" 
      android:layout_height="5dp" 
      android:layout_centerHorizontal="true" 
      android:layout_centerVertical="true" 
      android:background="#000000" 
      android:textAppearance="?android:attr/textAppearanceMedium" /> 

     <TextView 
      android:id="@+id/textView2" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_alignParentBottom="true" 
      android:layout_centerHorizontal="true" 
      android:layout_marginBottom="24dp" 
      android:text="played" 
      android:textColor="#000000" 
      android:textAppearance="?android:attr/textAppearanceMedium" /> 

     <TextView 
      android:id="@+id/textView3" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_above="@+id/textView1" 
      android:layout_centerHorizontal="true" 
      android:layout_marginBottom="22dp" 
      android:text="18" 
      android:textColor="#000000" 
      android:textAppearance="?android:attr/textAppearanceMedium" /> 

    </RelativeLayout> 

</RelativeLayout> 

创建布局的边界,从绘制使style.xml:

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
     android:shape="rectangle"> 
<stroke 
     android:width="5dp" 
     android:color="@android:color/black" /> 
</shape> 

输出:

enter image description here

+0

谢谢你的解决方案,我结束了使用类似的东西。 –

1

试试这个

<LinearLayout 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:id="@+id/my_text_box" 
    android:background="@drawable/border" 
    android:orientation="vertical" 
    android:gravity="center_horizontal" 
    > 

    <TextView 
     android:id="@+id/text1" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:textStyle="bold" 
     android:layout_margin="10dp" 
     /> 

    <View 
     android:layout_width="match_parent" 
     android:layout_height="2dp" 
     android:background="@android:color/black" 
     /> 

    <TextView 
     android:id="@+id/text2" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:textStyle="bold" 
     android:text="Played" 
     android:layout_margin="10dp" 
     /> 

</LinearLayout> 

在你绘制创建border.xml

<?xml version="1.0" encoding="UTF-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
<solid android:color="#FFFFFF" /> 
<stroke android:width="2dp" android:color="#000000" /> 
<padding android:left="1dp" android:top="1dp" android:right="1dp" 
    android:bottom="1dp" /> 
</shape> 
1

你需要一个垂直方向的LinearLayout与描边背景和之间的分隔符上部和下部TextView

RES /布局/ custom_view.xml

<?xml version="1.0" encoding="utf-8"?> 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:background="@drawable/custom_bg" 
    android:gravity="center"> 

    <TextView 
     android:id="@+id/value" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:textSize="22sp" 
     android:textStyle="bold" 
     android:paddingLeft="30dp" 
     android:paddingRight="30dp" 
     android:paddingTop="15dp" 
     android:paddingBottom="15dp" 
     android:text="18" /> 

    <View 
     android:layout_width="match_parent" 
     android:layout_height="2dp" 
     android:background="@android:color/black" /> 

    <TextView 
     android:id="@+id/status" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:padding="10dp" 
     android:text="Played" /> 

</LinearLayout> 

RES /绘制/ custom_bg.xml

<?xml version="1.0" encoding="utf-8"?> 

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle"> 
    <stroke 
     android:width="2dp" 
     android:color="@android:color/black" /> 
</shape> 

如果你想要去的OOP和连接对象视图使用GridViewListView,那么您可以扩展LinerLayout类。

CustomView.java

public class CustomView extends LinearLayout { 
    MyObject mObject; 

    public CustomView(Context context, MyObject object) { 
     super(context); 
     LinearLayout.inflate(getContext(), R.layout.custom_view, this); 
     initLayout(); 
    } 

    private void initLayout() { 
     ((TextView) findViewById(R.id.value)).setText(mObject.getValue().toString()); 
     ((TextView) findViewById(R.id.status)).setText(mObject.getStatus()); 
    } 

    public void setmObject(MyObject mObject) { 
     this.mObject = mObject; 
     initLayout(); 
    } 
} 

MyObject.java

public class MyObject { 
    Integer value; 
    String status; 

    /* constructors 
    getters and setters 
    */ 
}