custom popup dialog layout design

만들고나니 열라 허무.. 만들기전엔 졸라 삽질 -_-;

첨에는 relative layout을 이용해서 만들려고 했었으나.. relative layout의 동작방식이 좀 야리꾸리해서

원하는 모양으로 만들기 힘들었음.. 그러다가 걍 linear layout의 weight를 이용해서 해결

title영역의 사이즈는 고정, 버튼의 경우 팝업의 하단에 위치, 그 외의 영역을 body text영역으로

만든거임.

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout // 팝업영역을 가운데에 위치시키기 위한 parent layout
 xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center"
>
 <LinearLayout // 이게 팝업의 배경영역만큼만 차지하는 layout이다.
     android:id="@+id/customdialogpanel"
     android:orientation="vertical"
     android:layout_width="wrap_content" // wrap_content로 설정하면 팝업이미지 크기만큼 레이아웃이 잡힘
     android:layout_height="wrap_content"
     android:background="@drawable/bg_popup" // 팝업 배경이미지 지정
     android:padding="8px"
     android:gravity="center_horizontal"
  >
     <TextView // 이하 원하는 거 줄줄이 삽입
      android:id="@+id/customdialogtitle"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignTop="@id/customdialogpanel"
      android:gravity="center"
      android:textColor="#ffffff"
      android:textSize="30px"
      android:text="Title"
      />
     <TextView
      android:id="@+id/customdialogbody"
      android:layout_weight="1"        // 이넘만 weight값을 아무거나 집어넣어주면 들어있는 내용의 크기에 상관없이 타이틀과 버튼을 제외한 영역에 꽉참
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_below="@id/customdialogtitle"
      android:gravity="center"
      android:textColor="#ffffff"
      android:textSize="15px"
      android:text="body content1\nbody content2"
      />
   <Button
   android:id="@+id/customdialogbutton1"
   android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:gravity="center"
      android:textColor="#ffffff"
      android:textSize="20px"
      android:text="button1"
      android:background="@drawable/menubutton" // http://jjihun.tistory.com/70 참고
      android:layout_marginBottom="5px"
   />
  <Button
   android:id="@+id/customdialogbutton2"
   android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentBottom="true"
      android:gravity="center"
      android:textColor="#ffffff"
      android:textSize="20px"
      android:text="button2"
      android:background="@drawable/menubutton"
   />
  </LinearLayout>
</LinearLayout>

* ui를 만들때 보통 많이 쓰는 형태인 가운데에 팝업이 있고 배경이 살짝 어둡게 보이게 만드는 방법

1. activity를 생성
2. manifest.xml에 activity의 theme를 투명으로 지정

     <activity
       android:name=".CustomDialog"
       android:launchMode="standard"
       android:theme="@android:style/Theme.Translucent"
       ></activity>

투명으로 지정하지 않으면 화면을 검은색으로 채워버리기 때문에 theme를 꼭 투명으로 지정

3. 팝업 view의 xml을 생성 :
<?xml version="1.0" encoding="UTF-8"?>

<LinearLayout // 굳이 linear일 필요는 없다.. 원하는 거 쓰면 됨
 xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"        // 대충 전체화면 차지하게 만들고
    android:gravity="center"                      // 안에 들어가는넘은 가운데에위치시킴
>
 <LinearLayout // 굳이 linear일 필요는 없다.. 원하는 거 쓰면 됨
  android:id="@+id/customdialogpanel"
     android:orientation="vertical"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:background="@drawable/bg_popup"        // 팝업의 배경이미지를 지정함
     android:gravity="center"
     >
    ...
    //   이 부분에 팝업안에 들어갈 각종 뷰들을 정의하면 됨
    ...
 </LinearLayout>
</LinearLayout>

4. activity의 생성자에서 배경을 어둡게 만들고 layout을 inflate하고 애니메이션도 수행해보자

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  
// 이부분이 화면을 dimming시킴
  WindowManager.LayoutParams lpWindow = new WindowManager.LayoutParams();    lpWindow.flags = WindowManager.LayoutParams.FLAG_DIM_BEHIND;
  lpWindow.dimAmount = 0.75f;
  //lpWindow.windowAnimations = android.R.anim.accelerate_interpolator | android.R.anim.fade_in | android.R.anim.fade_out;
  getWindow().setAttributes(lpWindow);

// view inflating  
// 뷰를 생성함 이거 전에 window관련 동작을 처리해야한다.
// 뷰생성후에 dimming처리하면 안먹음
  setContentView(R.layout.customdialog); 

// 애니메이션을 수행 왼쪽에서 박스가 나와서 화면의 가운데에 위치하게 됨
        TranslateAnimation anim=new TranslateAnimation(   
          TranslateAnimation.RELATIVE_TO_PARENT, -1.0f, 
          TranslateAnimation.RELATIVE_TO_SELF, 0.0f,
          TranslateAnimation.RELATIVE_TO_SELF, 0.0f,
          TranslateAnimation.RELATIVE_TO_SELF, 0.0f);
        anim.setDuration(500);
        anim.setFillAfter(true);
        findViewById(R.id.customdialogpanel).setAnimation(anim);
        anim.start();
 }

* 배경을 dimming처리하는 방식은 여러가지가 있겠지만 배경을 dimming시키는 팝업 여러개를 겹쳐서 실행시킬 경우에 dimming된걸 다시 dimming시켜서 원하는 것보다 더 어둡게 만들 수가 있기 때문에
dimming에 관련된 처리를 android에서 제공하는 windowmanager를 통해서 하면
android가 알아서 중첩된 dimming처리를 smart하게 수행함 (몇개를 겹쳐서 실행시켜도 정확하게 75%어둡게 배경이 dimming처리됨)

위예제를 실행시켜보면 dimming은 dimming대로 fade-in 되면서 동시에 popup이 애니메이션 되는걸 알 수 있음

dialog를 customize할려고 했던건 삽질이고 이게 가장 적절한 방식인듯