Twitter喜欢UI

时间:2012-05-22 17:42:58

标签: android user-interface

我正在尝试开发一个类似Twitter的界面,但检查图像是如何以及应该如何。我不知道该怎么做。检查我的应用程序,滚动显示在白色框内和Twitter外。

图片:http://img845.imageshack.us/img845/2962/stackoverfloww.png

我的所有xml和样式:

layout / dashboard.xml(main)

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

    <include
        layout="@layout/action_bar"/>

    <include
        layout="@layout/events"/>

</RelativeLayout>

布局/ action_bar.xml

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

<ImageView style="@style/actionBarLogo"/>

</LinearLayout>

布局/ events.xml

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

<ListView
    android:id="@+id/events"
    style="@style/listView"/>

</LinearLayout>

布局/ events_item

<?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="wrap_content"
    android:orientation="horizontal"
    android:padding="8dip">

    <LinearLayout 
        android:id="@+id/thumbnail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_marginRight="6dip"
        android:background="#FFFFFF">

        <ImageView 
            android:id="@+id/thumbnail_image"
            android:layout_width="50dip"
            android:layout_height="50dip"
            android:src="@drawable/uerj"/>

    </LinearLayout>

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/thumbnail"
        android:layout_toRightOf="@+id/thumbnail"
        android:layout_marginTop="1dip"
        android:text="Event"
        android:textColor="#000000"
        android:textSize="13dip"
        android:textStyle="bold"
        android:typeface="monospace" />

    <TextView
        android:id="@+id/locale"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/title"
        android:layout_marginLeft="1dip"
        android:layout_centerVertical="true"
        android:text="Locale"
        android:textColor="#000000"
        android:textSize="10dip" />

    <TextView 
        android:id="@+id/date"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignTop="@id/title"
        android:gravity="right"
        android:layout_marginRight="6dip"
        android:textSize="8dip"
        android:text="Date"
        android:textColor="#000000"/>

</RelativeLayout>

值/ styles.xml

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

    <style name="dashboard">
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">fill_parent</item>
        <item name="android:orientation">vertical</item>
        <item name="android:background">#E4E4E4</item>
    </style>

<style name="actionBar">
    <item name="android:layout_width">fill_parent</item>
    <item name="android:layout_height">45dp</item>
    <item name="android:orientation">horizontal</item>
    <item name="android:background">@drawable/action_bar_background</item>
    <item name="android:layout_alignParentTop">true</item>
</style>

<style name="actionBarLogo">
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">fill_parent</item>
    <item name="android:paddingTop">1dip</item>
    <item name="android:paddingLeft">8dip</item>
    <item name="android:scaleType">center</item>
    <item name="android:clickable">false</item>
    <item name="android:contentDescription">Action Bar Logo</item>
    <item name="android:src">@drawable/action_bar_logo</item>
</style>

<style name="content">
    <item name="android:layout_marginTop">8dp</item>
    <item name="android:layout_marginLeft">8dp</item>
    <item name="android:layout_marginRight">8dp</item>
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:background">#FFFFFF</item>
</style>

<style name="listView">
    <item name="android:layout_marginTop">8dp</item>
    <item name="android:layout_marginLeft">8dp</item>
    <item name="android:layout_marginRight">8dp</item>
    <item name="android:layout_width">fill_parent</item>
    <item name="android:layout_height">wrap_content</item>
        <item name="android:divider">#ECECEC</item>
        <item name="android:dividerHeight">1dp</item>
        <item name="android:cacheColorHint">#00000000</item>
        <item name="android:background">@drawable/content</item>
    </style>

</resources>

抽拉/ action_bar_background.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <gradient
                android:angle="90"
                android:startColor="#1E69A0"
                android:endColor="#5FAFE6"
                android:type="linear" />
        </shape>
    </item>
</selector>

抽拉/ content.xml中

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

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

    <stroke
        android:width="1px"
        android:color="#C6C6C6"/>

    <padding
        android:left="1dp"
        android:top="1dp"
        android:right="1dp"
        android:bottom="1dp"/> 

    <corners
        android:radius="4dp"/> 

</shape>

1 个答案:

答案 0 :(得分:0)

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

    <include
        android:id="@+id/actionBar"
        layout="@layout/action_bar"/>

    <include
        android:layout_below="@id/actionBar"
        layout="@layout/events"/>

</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    style="@style/dashboard" 
    android:orientation="portrait">

    <include
        layout="@layout/action_bar"/>

    <include
        layout="@layout/events"/>

</LinearLayout>