[Android][Ex]채팅 어플리케이션 메인화면 UI 구성

Ex.Chat_V1R0.zip

카카오톡, 마이피플, 라인, 챗온 등등 여러 채팅프로그램이 서로 매우 유사한 UI 구성을 가지고 있습니다. 

GridLayout과 Listview를 이용하여 기존 채팅 App의 UI를 구성해보았습니다.

                

  

개발 환경

OS: Windows 7 Professional  IDE: Eclipse Juno    -Target Version-     min: 4.0     max: 4.2

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/LinearLayout1"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    tools:context=".MainActivity" >      <GridLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_gravity="center"        android:numColumns="4" >          <ImageButton            android:id="@+id/btn_friend"            android:layout_gravity="left"            android:src="@drawable/ic_launcher" />          <ImageButton            android:id="@+id/btn_study"            android:layout_gravity="left"            android:src="@drawable/ic_launcher" />          <ImageButton            android:id="@+id/btn_add"            android:layout_gravity="left"            android:src="@drawable/ic_launcher" />          <ImageButton            android:id="@+id/btn_more"            android:layout_gravity="left"            android:src="@drawable/ic_launcher" />     </GridLayout>      <FrameLayout        android:layout_width="match_parent"        android:layout_height="wrap_content" >           <ListView            android:id="@+id/list1"            android:layout_width="match_parent"            android:layout_height="wrap_content"            >         </ListView>          <ListView            android:id="@+id/list2"            android:layout_width="match_parent"            android:layout_height="wrap_content" >         </ListView>          <ListView            android:id="@+id/list3"            android:layout_width="match_parent"            android:layout_height="wrap_content" >         </ListView>          <GridView            android:id="@+id/gview_more"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:numColumns="3" >         </GridView>     </FrameLayout>  </LinearLayout>

- activity_main.xml에 추가한 ListView의 id는 android:id="@+id/XXXX" 개발자가 마음대로 정하면 됩니다. 저의 경우 list1, list2, list3이라고 정했습니다.

 

MainActivity.java

import android.app.Activity; import android.os.Bundle; import android.view.View; import android.widget.ArrayAdapter; import android.widget.GridView; import android.widget.ListView;   public class MainActivity extends Activity implements View.OnClickListener {       private String[] friend = { "HM", "JM", "SK", "DS",             "EF", "HG", "SD", "QA", "AS",             "TY", "FG", "QM" };     private String[] chat = { "1", "2", "3", "4", "5", "6", "7", "8", "9",             "10", "11", "12", "13" };     private String[] add = { "?", "??", "???", "????", "?", "??0", "???",             "????" };     private String[] more = { "Option", "Profile", "Nothing", "oh", "Game",             "Demo" };       ListView lViewFriend;     ListView lViewStudy;     ListView lViewAdd;     GridView gViewMore;       @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);           findViewById(R.id.btn_friend).setOnClickListener(this);         findViewById(R.id.btn_study).setOnClickListener(this);         findViewById(R.id.btn_add).setOnClickListener(this);         findViewById(R.id.btn_more).setOnClickListener(this);           lViewFriend = (ListView) findViewById(R.id.list1);         lViewFriend.setVisibility(View.VISIBLE);         lViewFriend.setAdapter(new ArrayAdapter<String>(this,                 android.R.layout.simple_list_item_1, friend));         lViewStudy = (ListView) findViewById(R.id.list2);         lViewAdd = (ListView) findViewById(R.id.list3);         gViewMore = (GridView) findViewById(R.id.gview_more);     }       @Override     public void onClick(View v) {         lViewFriend.setVisibility(View.INVISIBLE);         lViewStudy.setVisibility(View.INVISIBLE);         lViewAdd.setVisibility(View.INVISIBLE);         gViewMore.setVisibility(View.INVISIBLE);           if (v.getId() == R.id.btn_friend) {             lViewFriend.setVisibility(View.VISIBLE);             lViewFriend.setAdapter(new ArrayAdapter<String>(this,                     android.R.layout.simple_list_item_1, friend));         }         if (v.getId() == R.id.btn_study) {             lViewStudy.setVisibility(View.VISIBLE);             lViewStudy.setAdapter(new ArrayAdapter<String>(this,                     android.R.layout.simple_list_item_1, chat));         }         if (v.getId() == R.id.btn_add) {             lViewAdd.setVisibility(View.VISIBLE);             lViewAdd.setAdapter(new ArrayAdapter<String>(this,                     android.R.layout.simple_list_item_1, add));         }         if (v.getId() == R.id.btn_more) {             gViewMore.setVisibility(View.VISIBLE);             gViewMore.setAdapter(new ArrayAdapter<String>(this,                     android.R.layout.simple_list_item_1, more));         }     } }