'안드로이드/Layout'에 해당되는 글 23건

view_flipper.xml

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"
    tools:context="com.tistory.link2me.viewfliper.MainActivity">

    <com.tistory.link2me.viewfliper.View_Flipper
        android:id="@+id/screen"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="10dp" />

</RelativeLayout>

View_Flipper.java

import android.content.Context;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ViewFlipper;

public class View_Flipper extends LinearLayout implements View.OnTouchListener {

    public static int cntIndex= 10; // 뷰플리퍼를 구현할 화면의 갯수
    LinearLayout indexLayout; // 현재 화면의 인덱스를 표현하기 위한 레이아웃
    ImageView[] indexImgs; // 현재 화면의 인덱스를 나타내는 이미지들
    View[] views; // 뷰플리퍼에 사용할 뷰
    ViewFlipper viewFlipper;

    float startX; // 손가락으로 화면을 터치했을 때 x좌표값을 저장하기 위한 변수
    float endX; // 화면에서 손가락을 뗏을 때 x좌표값을 저장하기 위한 변수

    int currentIndex = 0; //현재의 화면 인덱스 값

    public View_Flipper(Context context) {
        super(context);
        init(context);
    }

    public View_Flipper(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    public void init(Context context){
        setBackgroundColor(0xffbbbbff);

        LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        inflater.inflate(R.layout.view_flipper, this, true);

        indexLayout = (LinearLayout) findViewById(R.id.screenIdx);
        viewFlipper = (ViewFlipper) findViewById(R.id.flipper);
        viewFlipper.setOnTouchListener(this);

        LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        params.leftMargin = 50;

        indexImgs = new ImageView[cntIndex];
        views = new ImageView[cntIndex];

        //index 이미지와 뷰플리퍼 화면을 만드는 과정
        for(int i=0; i < cntIndex; i++){
            indexImgs[i] = new ImageView(context);

            if (i == currentIndex){
                indexImgs[i].setImageResource(android.R.drawable.btn_star_big_on);
            }else {
                indexImgs[i].setImageResource(android.R.drawable.btn_star_big_off);
            }

            //indexImgs[i].setPadding();
            indexLayout.addView(indexImgs[i], params);

            ImageView currentView = new ImageView(context);
            currentView.setImageResource(R.mipmap.gametitle_01+i);
            views[i] = currentView;

            viewFlipper.addView(views[i]);
        }
    }

    //인덱스 이미지를 수정
    public void modifyIndex(){
        for(int i = 0; i <cntIndex; i++){
            if(i == currentIndex) {
                indexImgs[i].setImageResource(android.R.drawable.btn_star_big_on);
            }else{
                indexImgs[i].setImageResource(android.R.drawable.btn_star_big_off);
            }
        }
    }

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        if(v != viewFlipper) return false;

        if(event.getAction() == MotionEvent.ACTION_DOWN){
            startX = event.getX();
        } else if(event.getAction() == MotionEvent.ACTION_UP){
            endX = event.getX();
            if(startX < endX){ // 왼쪽에서 오른쪽으로 터치
                //viewFlipper에 애니메이션 설정
                viewFlipper.setInAnimation(AnimationUtils.loadAnimation(getContext(),R.anim.left_in));
                viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(getContext(),R.anim.right_out));

                //인덱스체크 - 첫번째화면이면 동작없음
                if(currentIndex > 0){
                    viewFlipper.showPrevious();
                    currentIndex--;
                    modifyIndex();
                }
            } else if(startX > endX){ // 오른쪽에서 왼쪽으로 터치
                viewFlipper.setInAnimation(AnimationUtils.loadAnimation(getContext(),R.anim.right_in));
                viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(getContext(),R.anim.left_out));

                //인덱스체크 - 마지막화면이면 동작없음
                if(currentIndex < (cntIndex-1)){
                    viewFlipper.showNext();
                    currentIndex++;
                    modifyIndex();
                }
            }
        }
        return true;
    }
}

 공통

 android:layout_width="match_parent" // 무조건 남아있는 여유공간을 채움
 android:layout_width="wrap_content" // View의 내용물의 크기에 따라 결정되도록 함
 android:layout_margin="10dp"  // 위젯과 여유 공간 사이의 여백 설정
 android:padding="20dp"  // 위젯 내부 여백 설정

LinearLayout

 간단하고 직관적으로 이해하기 쉬워서 많아 사용한다.

 자식(child) View 들을 수평 또는 수직으로 배치한다.

 android:orientation="vertical"  // 수직으로 배치(수직으로 차곡차곡 쌓겠다)

 android:gravity="top" // 상단 (View의 정렬방향을 설정)

 android:gravity="left|top" // 왼쪽 상단

 android:gravity="center_horizontal|center_vertical"  // 정중앙

 android:gravity="right|bottom"  // 오른쪽 하단

 Gravity 속성을 이용하여 자식(child) View 를 상단, 하단, 중앙에 배치할 수 있다.

 android:layout_weight="1" // View 내부 child끼리의 크기 비율 지정(공간 가중치) 

 child View 의 가중치를 지정하지 않으면 0 으로 간주하고 확장하지 않는다.

 LinearLayout 을 여러개 사용하면 각 Layout의 크기를 지정해야 한다.

 내부 LinearLayout 에서 layout_weight="1" 로 모두 지정하면 비율이 동일하게 출력된다.

 layout_margin은 "값"만큼 띄어서 배치하겠다는 뜻

 android:layout_gravity=center

 gravity 속성 앞에 layout이 붙어 있으면 해당 위젯이 포함되어 있는 Layout 위젯의

 정렬방식을 의미한다.

 RelativeLayout

 View 들의 위치가 상대적으로 정해진다.

 (기준 View 가 있고, 배치하고자 하는 View를 기준 View의 어디에 둘 것인지 설정)

 RelavtiveLayout 은 자신을 포함하고 있는 컨테이너나 다른 위젯을 기준으로 위젯을

 배치하는 레이아웃(layout)이다.

 부모 컨테이너나 다른 View(위젯)와의 상대적 위치를 이용해 화면을 구성한다.

 android:layout_below="@id/topButton"  <-- topButton 기준으로 하단에 위치

 android:layout_above="@id/bottomButton" <-- bottomButton 기준 위에 위치

 ★ 자신을 포함하는 컨테이너를 기준으로 해당 위젯을 배치하는 속성들

 layout_alignParentTop : 부모 컨테이너의 위쪽과 뷰의 위쪽을 맞춤
 layout_alignParentBottom : 부모 컨테이너의 아래쪽과 뷰의 아래쪽을 맞춤
 layout_alignParentLeft : 부모 컨테이너의 왼쪽 끝과 뷰의 왼쪽 끝을 맞춤
 layout_alignParentRight : 부모 컨테이너의 오른쪽 끝과 뷰의 오른쪽 끝을 맞춤
 layout_centerHorizontal : 부모 컨테이너의 수평방향 중앙에 배치
 layout_centerVertical : 부모 컨테이너의 수직 방향 중앙에 배치
 layout_centerInParent : 부모 컨테이너의 수평과 수직 방향 중앙에 배치

 ★ 다른 위젯을 기준으로 해당 위젯을 배치하는 속성들

 layout_above : 지정한 뷰의 위쪽에 배치
 layout_below : 지정한 뷰의 아래쪽에 배치
 layout_toLeftOf : 지정한 뷰의 왼쪽에 배치
 layout_toRightOf : 지정한 뷰의 오른쪽에 배치
 layout_alignTop : 지정한 뷰의 위쪽과 맞춤
 layout_alignBottom : 지정한 뷰의 아래쪽과 맞춤
 layout_alignLeft : 지정한 뷰의 왼쪽과 맞춤
 layout_alignRight : 지정한 뷰의 오른쪽과 맞춤
 layout_alignBaseline : 지정한 뷰와 내용물의 아래쪽 기준선(baseline)을 맞춤

  android:layout_centerVertical="true"

 FrameLayout

 여러 Layout 을 중첩시켜, 원하는 Layout 만 볼 수 있도록 해준다.

 자식 View 들은 등장하는 순서대로 화면에 중첩되어 표시된다. 

 기준점은 좌측 상단이 된다.

 TableLayout

 격자모양의 배열을 이용하여 화면을 구성한다.

 자식 View 들을 테이블 형태로 배치한다.

 layout_span 은 열을 합쳐서 표시하라는 의미.

 layout_span="3" 은 현재 셀부터 3개를 합쳐서 표시하라는 의미