android 实现类似个人中心的界面设计

 

From:android 实现类似个人中心的界面设计

上效果图： 


 



先理清设计思路： 

1、外层用linearlayout包裹，linearlayout采用shape,搭上描边、圆角和填充背景色。 

2、里层采用relativelayout填充进textview、imageview。 

思路搞清后，很简单就两步。 

先上布局代码：

<LinearLayout style="@style/PersonalMainLayoutStyle" >

<RelativeLayout style="@style/FindBottomStyle" >

<TextView
style="@style/PersonalTextStyle"
android:text="我的订单" />

<ImageView
android:id="@+id/iv_drop_down"
style="@style/PersonalRightIconStyle"
android:src="@drawable/android_list_idex" />
</RelativeLayout>
</LinearLayout>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
4
5
6
7
8
9
10
11
12
13
14
linearlayout布局属性代码：

<style name="PersonalMainLayoutStyle">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_margin">10dp</item>
<item name="android:background">@drawable/background_corners</item>
<item name="android:orientation">vertical</item>
<item name="android:padding">1dp</item>
</style>

1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
relativelayout布局属性代码：

<style name="FindBottomStyle">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">30dp</item>
<item name="android:layout_margin">5dp</item>
<item name="android:background">@drawable/more_activity_item_selector_bottom_corners</item>
</style>

1
2
3
4
5
6
1
2
3
4
5
6
textview和imageview的属性代码可以自己设计了。
下面是drawable的设计代码. 

看到上边relativelayout的item中引用了drawable-more_activity_item_selector_bottom_corners,个人感觉好像没什么卵用，主要是linearlayout的drawable，但是我没试，还是贴出来吧 

relativelayout-drawable:

<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape>
<solid android:color="#ffffe381" />
<stroke android:width="0.0dip" android:color="#ffcccccc" />
<corners android:bottomLeftRadius="6.0dip" android:bottomRightRadius="6.0dip" />
</shape>
</item>
<item>
<shape>
<solid android:color="#ffffffff" />
<stroke android:width="0.0dip" android:color="#ffcccccc" />
<corners android:bottomLeftRadius="6.0dip" android:bottomRightRadius="6.0dip" />
</shape>
</item>
</selector>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
linearlayout-drawable:

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

<item><shape>
<solid android:color="#ffffffff" />

<stroke android:width="1.0dip" android:color="#ffcccccc" />

<corners android:radius="6.0dip" />
</shape></item>

</selector>

1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12