チャット アプリケーションを作成しており、実際のチャット ビューを作成する方法を考えています。
チャット ウィンドウ自体のレイアウトはすでにありますが、チャット メッセージをどのように実装するかを考えていました。
を作成しようと考えていましたTableLayout。各行にはユーザーの画像とチャット メッセージ (または吹き出しなど) が表示されます。
これらの行を設計および作成する方法についてアイデアを持っている人はいますか?
これまで私がやったことは以下の通りです:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/background_light"
android:orientation="vertical"
android:weightSum="10" >
<ScrollView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1" >
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:stretchColumns="1" >
<TableRow
android:id="@+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<!-- insert chat message here !-->
</TableRow>
<View
android:layout_height="2dip"
android:background="#000" />
<TableRow
android:id="@+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<!-- next chat message --!>
</TableRow>
</TableLayout>
</ScrollView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_weight="9"
android:orientation="horizontal" >
<EditText
android:id="@+id/chatLine"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="Say:"
android:imeOptions="actionSend"
android:singleLine="true" />
</LinearLayout>
</LinearLayout>
ベストアンサー1
以下のコードはどうでしょうか -
メイン.xml
<LinearLayout android:id="@+id/list_layout"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:background="@drawable/background"
xmlns:android="http://schemas.android.com/apk/res/android">
<ListView android:id="@+id/myList"
android:layout_height="fill_parent"
android:layout_width="wrap_content"/>
</LinearLayout>
リスト行レイアウト.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/even_container"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView android:id="@+id/user_img"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_marginTop="80dip"
android:src="@drawable/sample_image"/>
<ImageView android:id="@+id/even_bubble"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:layout_margin="5dip"
android:src="@drawable/even"/>
<TextView android:id="@+id/text"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:textColor="#000000"
android:textSize="16dip"
android:layout_marginRight="8dip"
android:layout_marginLeft="120dip"
android:layout_marginTop="10dip" />
</RelativeLayout>
リスト行レイアウト_odd.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/even_container"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView android:id="@+id/user_img"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_marginTop="80dip"
android:layout_alignParentRight="true"
android:src="@drawable/sample_image"/>
<ImageView android:id="@+id/odd_bubble"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentLeft="true"
android:layout_margin="5dip"
android:src="@drawable/odd"/>
<TextView android:id="@+id/text"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentLeft="true"
android:textColor="#ffffff"
android:textSize="16dip"
android:layout_marginRight="120dip"
android:layout_marginLeft="8dip"
android:layout_marginTop="10dip" />
</RelativeLayout>
これが私の出力です -
