Android TableView 및 이미지 (스크롤 레이아웃)

Question

나는 초보자이며 몇 시간 동안 안드로이드 레이아웃 작업을 해왔습니다. http://i43.tinypic.com/254wkt5.png

나는 내가 레이아웃을 통해 작업을 시도하고 네 개의 문제가 :

첫째, 위의 링크로 플러시 왼쪽 이미지를 만들 수 있죠 어떻게 나는이 비슷한 레이아웃을 만들려고하고 있어요 ? 내 모든 것이이 페이지의 중심에 있습니다. 또한 서로 다른 크기의 이미지를 같은 크기, 즉 안드로이드 아이콘의 크기만큼 크기를 조정하려면 어떻게해야합니까? 내가 가지고있는 이미지는 꽤 크다 : http://i39.tinypic.com/2eo8dg7.png.

내 세 번째 문제점은 팁 보관 버튼과 관련이 있습니다. 같은 테이블 행에 나란히 놓 이도록 어떻게 배열 할 수 있습니까?

마지막으로 레이아웃을 기본적으로 스크롤 할 수 있다고 생각했습니다. 내 레이아웃의 나머지 부분을보기 위해 스크롤하는 것은 불가능합니다 (괜찮을 것입니다). 그 이미지와 버튼은 나에게 혼란 스럽다.

<?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은 좋을 것입니다!

나는 텍스트의 첫 번째 조각 아래에 표시하는 선 기울기를 얻는 행운을 가진 최초의 제안에 따라이를 시도했다 : 지금은

<?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> 

Answer 1

는 모형 이미지, 즉하지 않는다는 것입니다 테이블 레이아웃처럼 보일 수도 있습니다 (파란색 막대 일 수도 있지만 두 개의 선형 레이아웃 또는 이미지로 처리 할 수 ​​있습니다). 테이블을 사용하여 수행 할 수 있지만 시간과 에너지를 낭비합니다. 아이디어가 있습니다. LinearLayout

012을 사용하여 그 후

<RelativeLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 
</RelativeLayout> 

: 모든 화면을 채우는 상대 레이아웃을 사용하여

<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" 
/> 

참고 최고, 또는 기타에 가벼운 수 있도록하려면 스타일을 사용하려면 그라디언트 사용을 고려해야합니다.

등등 :)

행운

, Arkde