Interfaz de usuario similar a Twitter
Frecuentes
Visto 1,323 veces
1
Estoy tratando de desarrollar una interfaz como Twitter, pero mira las imágenes cómo es y cómo debería ser. no se mas que hacer. Compruebe que en mi aplicación, el desplazamiento aparece dentro del cuadro blanco y en Twitter fuera.
Imagen: http://img845.imageshack.us/img845/2962/stackoverfloww.png
Todos mis xml y estilos:
diseño/dashboard.xml (principal)
<?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>
diseño/acción_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>
diseño/eventos.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>
diseño/eventos_elemento
<?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>
valores / estilos.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>
dibujable/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>
dibujable/contenido.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 Respuestas
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>
or
<?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>
contestado el 22 de mayo de 12 a las 18:05
No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas android user-interface or haz tu propia pregunta.
No pasó nada. Otra cosa, probablemente tendré que cambiar la estructura del diseño, ¿entiendes lo que dije sobre el pergamino? En mi aplicación, solo el contenido dentro del cuadro blanco se desplaza, en la aplicación de Twitter, todo el cuadro blanco se desplaza, ¿cómo puedo hacer eso? Gracias por la respuesta. - usuario1320990
Debería haberlo hecho, ¿probaste ambos? También está envolviendo su vista de lista en un LinearLayout adicional que no necesita - Blundell
Solo tuve que cambiar la barra de acción a un diseño relativo y usar lo siguiente. Pero ahora, ¿cómo puedo envolver esta lista dentro de una caja blanca como Twitter? Ya lo hice, pero cuando te desplazas, solo se desplaza el contenido dentro del cuadro, no todo el cuadro... =/ ¿Cómo puedo hacer esto? ¡Gracias! - usuario1320990