Android TableView и изображения (прокручиваемый макет)
Я новичок и уже несколько часов работаю над макетом Android без удачи. Я пытаюсь создать макет, похожий на этот: http://i43.tinypic.com/254wkt5.png
У меня есть четыре проблемы, которые я пытаюсь решить с макетом:
Во-первых, как сделать так, чтобы изображения выровнялись влево, как в ссылке выше? Мои все сосредоточены на странице. Кроме того, как я могу масштабировать изображения разных размеров, чтобы они были одинакового размера - то есть размером с значок андроида? Изображение у меня довольно большое: http://i39.tinypic.com/2eo8dg7.png.
Моя третья проблема связана с кнопками Leave a tip. Как их можно расположить так, чтобы они находились рядом в одной строке таблицы?
Наконец, я подумал, что макеты по умолчанию прокручиваются. Я не могу прокрутить, чтобы увидеть остальную часть моего макета (что должно быть в порядке). Это изображения и кнопки, которые смущают меня.
Вот мой XML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout style="@style/TitleBar">
<ImageButton style="@style/TitleBarAction"
android:contentDescription="@string/description_home"
android:src="@drawable/title_home"
android:onClick="onClickHome" />
<ImageView style="@style/TitleBarSeparator" />
<TextView style="@style/TitleBarText" />
<ImageButton style="@style/TitleBarAction"
android:contentDescription="@string/description_about"
android:scaleType="fitXY"
android:src="@drawable/about"
android:onClick="onClickAbout" />
</LinearLayout>
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tableLayout1"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:stretchColumns="1">
<TableRow>
<TextView
android:text="Community Summary"
android:textSize="18sp"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</TableRow>
<View android:layout_height="2dip" android:background="#FF909060" />
<TableRow>
<TextView
android:text="Leaderboard"
android:textSize="16sp"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</TableRow>
<TableRow>
<ImageView
android:id="@+id/firstPlaceIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/android"/>
<TextView
android:id="@+id/household1"
android:text="Household 1"/>
</TableRow>
<TableRow>
<ImageView
android:id="@+id/secondPlaceIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/android"/>
<TextView
android:id="@+id/household1"
android:text="Household 2" />
</TableRow>
<TableRow>
<ImageView
android:id="@+id/thirdPlaceIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/sample_0"/>
<TextView
android:id="@+id/household3"
android:text="Household 3" />
</TableRow>
<View android:layout_height="1dip" android:background="#FF909060" />
<TableRow>
<TextView
android:text="How do I compare?"
android:textSize="16sp"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</TableRow>
<TableRow>
<Button
android:id="@+id/howdoICompareStatus"
android:text="Compare me to others"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>
<View android:layout_height="1dip" android:background="#FF909060" />
<TableRow>
<TextView
android:text="Tips"
android:textSize="16sp"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</TableRow>
<TableRow>
<TextView
android:id="@+id/statusTips"
android:text="Temporary Tips Text"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</TableRow>
<View android:layout_height="1dip" android:background="#FF909060" />
<TableRow>
<TextView
android:text="Status"
android:textSize="16sp"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</TableRow>
<TableRow>
<TextView
android:id="@+id/communitysize"
android:text=""
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</TableRow>
<TableRow>
<TextView
android:id="@+id/tbd"
android:text="More features coming soon!"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</TableRow>
</TableLayout>
</LinearLayout>
Любые советы или ресурсы помогут. Образец XML будет здорово!
Я попробовал это, основываясь на первом предложении, но безуспешно заставил градиент линии появиться ниже первого фрагмента текста:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout style="@style/TitleBar"
android:id="@+id/titleBar">
<ImageButton style="@style/TitleBarAction"
android:contentDescription="@string/description_home"
android:src="@drawable/title_home"
android:onClick="onClickHome" />
<ImageView style="@style/TitleBarSeparator" />
<TextView style="@style/TitleBarText" />
<ImageButton style="@style/TitleBarAction"
android:contentDescription="@string/description_about"
android:scaleType="fitXY"
android:src="@drawable/about"
android:onClick="onClickAbout" />
</LinearLayout>
<LinearLayout
android:id="@+id/top_linear"
android:layout_height="80dp"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_below="@+id/titleBar" >
<LinearLayout
android:id="@+id/linear2"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_below="@id/top_linear"
android:stretchColumns="1">
<TextView
android:id="@+id/communitySummary"
android:text="Community Summary"
android:textSize="18sp"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<View
android:id="@+id/dividerSummary"
android:background="@drawable/black_white_gradient"
android:layout_alignBottom="@+id/communitySummary"
android:layout_height="1dp"
android:layout_width="fill_parent"/>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
Мое решение на данный момент. Мне все еще нужно выяснить, как разместить информацию рядом с тремя изображениями, но я думаю, что получу ее:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/myinfo_root"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:scrollbars="vertical"
>
<LinearLayout style="@style/TitleBar">
<ImageButton style="@style/TitleBarAction"
android:contentDescription="@string/description_home"
android:src="@drawable/title_home"
android:scaleType="fitXY"
android:onClick="onClickHome" />
<ImageView style="@style/TitleBarSeparator" />
<TextView style="@style/TitleBarText" />
<ImageButton style="@style/TitleBarAction"
android:contentDescription="@string/description_about"
android:src="@drawable/about"
android:scaleType="fitXY"
android:onClick="onClickAbout" />
</LinearLayout>
<ScrollView android:layout_width="fill_parent" android:layout_height="wrap_content">
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/relative_layout"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:padding="10dp" >
<TextView
android:id="@+id/communitySummary"
android:text="Community Summary"
android:textSize="18sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<View
android:id="@+id/dividerSummary"
android:background="@drawable/black_white_gradient"
android:layout_below="@+id/communitySummary"
android:layout_height="1dp"
android:layout_width="fill_parent"/>
<TextView
android:id="@+id/leaderboard"
android:paddingTop="10dp"
android:text="Leaderboard"
android:textSize="16sp"
android:layout_below="@+id/dividerSummary"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:id="@+id/firstPlaceIcon"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_below="@+id/leaderboard"
android:src="@drawable/image20"
/>
<TextView
android:id="@+id/top_spot"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="10px"
android:layout_toLeftOf="@id/firstPlaceIcon"
android:text="Top spot: "/>
<TextView
android:id="@+id/household1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="@+id/top_spot"
android:text=""/>
<ImageView
android:id="@+id/secondPlaceIcon"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_below="@+id/firstPlaceIcon"
android:src="@drawable/image15"/>
<ImageView
android:id="@+id/thirdPlaceIcon"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_below="@+id/secondPlaceIcon"
android:src="@drawable/image10"/>
<View
android:id="@+id/dividerLeaderboard"
android:background="@drawable/black_white_gradient"
android:layout_below="@+id/thirdPlaceIcon"
android:layout_height="1dp"
android:layout_width="fill_parent"/>
<TextView
android:id="@+id/howdoICompareText"
android:text="How do I compare?"
android:paddingTop="10dp"
android:layout_below="@+id/dividerLeaderboard"
android:textSize="16sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="@+id/howdoICompareStatus"
android:text="Compare me to others"
android:layout_width="wrap_content"
android:layout_below="@+id/howdoICompareText"
android:layout_height="wrap_content" />
<View
android:id="@+id/dividerCompareStatus"
android:paddingTop="10dp"
android:background="@drawable/black_white_gradient"
android:layout_below="@+id/howdoICompareStatus"
android:layout_height="1dp"
android:layout_width="fill_parent"/>
<TextView
android:id="@+id/waystoSaveHeader"
android:text="Ways to Save"
android:layout_below="@+id/dividerCompareStatus"
android:textSize="16sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/waystoSave"
android:text=""
android:layout_below="@+id/waystoSaveHeader"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/leaveaMessageHeader"
android:text="Leave a message to your community"
android:paddingTop="10dp"
android:layout_below="@+id/waystoSave"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="@+id/leaveMsgBtn"
android:text="Leave a Message"
android:layout_width="wrap_content"
android:layout_below="@+id/leaveaMessageHeader"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/seeMessagesHeader"
android:text="See community messages"
android:layout_below="@+id/leaveMsgBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="@+id/sendMsgBtn"
android:text="See messages"
android:layout_width="wrap_content"
android:layout_below="@+id/seeMessagesHeader"
android:layout_height="wrap_content" />
<View
android:id="@+id/dividerWaystoSave"
android:paddingTop="10dp"
android:background="@drawable/black_white_gradient"
android:layout_below="@+id/sendMsgBtn"
android:layout_height="1dp"
android:layout_width="fill_parent"/>
<TextView
android:id="@+id/CommunityStatusHeader"
android:text="Community Status"
android:layout_below="@+id/dividerWaystoSave"
android:textSize="16sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/communitysize"
android:text=""
android:layout_below="@+id/CommunityStatusHeader"
android:paddingTop="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
</ScrollView>
</LinearLayout>
1 ответ
Решение
Первое, что вы должны знать, это то, что на макете изображение, которое не похоже на макет таблицы (возможно, верхнюю синюю полосу, но это можно сделать с помощью двух линейных макетов или изображений довольно просто), это можно сделать с помощью Таблицы, но это пустая трата времени и энергии:) Так что вот идея: Используйте Относительный макет, который заполняет весь экран:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
</RelativeLayout>
После этого используйте LinearLayout
<LinearLayout
android:id="@+id/top_linear"
android:layout_height="80dp"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_alignParentTop="true"
>
</LinearLayout>
это будет содержать либо еще два вложенных макета или два изображения.
После этого вы устанавливаете еще один LinearLayout под ним android:layout_below="@id/top_linear это будет держать название.
После этого вы заполните несколько линейных макетов изображением и текстом (одинаковой горизонтальной ориентации) один под другим, чтобы получить раздел изображений / текста.
Разделители (эти линии серые / черные) можно получить так:
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#000000"
/>
Обратите внимание, что цвет фона может быть любым гексагоном, и если вы хотите быть светлее сверху или любыми другими стилями, вы должны рассмотреть возможность использования градиента.
И так далее:)
Удачи Аркде