duplicateParentState 사용해서 그룹눌림효과(Selector)를 내보자!

duplicateParentState 사용해서 

그룹눌림효과(Selector)를 내보자!

ㆍ 이번글에서는 간단하게 그룹으로 눌림효과를

    주는 방법에 대해 알아보도록 하겠습니다.

ㆍ 그룹이라고 말하는지 잘 모르겠지만 그냥 이렇게

    써봤습니다

보통 버튼에 눌림효과를

주기 위해서 selector를 많이

사용하게 됩니다.

보통 이런식으로 사용하겠죠

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_focused="false"
        android:state_selected="false"
        android:state_pressed="false"
        android:drawable="@drawable/기본이미지" />
    <item
        android:state_focused="false"
        android:state_selected="true"
        android:state_pressed="false"
        android:drawable="@drawable/선택됬을때의 이미지" />
    <item
        android:state_pressed="true"
        android:drawable="@drawable/눌렸을때 이미지" />
</selector>

기본적으로 눌렸을때 효과만

줄 때는 pressed(true,false)만

적어주면 되겠죠?

이번에는 그냥 선택됐을때의

이미지도 따로 넣어봤습니다.

어쨋든..

이번글에서는 그룹눌림효과이기때문에

그룹눌림효과가 대충 무엇이냐

설명해보자면

스마일이미지와 + 동그라미3개 셋트 이미지

이렇게 2가지 이미지를 가지고 있는데

만약에 스마일을 눌렀을 때 아래 이미지까지

동시에 눌림효과를 주고 싶을때가 있을겁니다.

이런식으로

스마일을 눌렀을때

동시에 노란색으로 변경시키고

싶을 경우가 있습니다.

뭐 사실 이런경우에는

디자인할때 하나로 합쳐서

넣으면 그만이겠지만..

이미지 안에 TextView가

겹쳐있는 경우라거나

(RelativeLayout을 이용했겠죠?)

등등 특수한 경우가 있습니다

이럴때 코드를 어떻게 줘야할지

애매합니다..

방법이야 여러가지가 있겠죠

스마일을 눌렀을때

아래 이미지도 변경시키면 되겠죠

그리고 터치를 땔 때 다시 변경해주거나..

(onTouchEvent에서 제어해주면 가능합니다)

근데 이럴경우 duplicateParentState를

사용하면 아주 간편하게 그룹효과를

쓸 수 있습니다.

사용방법은 그룹이미지들 위에

Layout을 하나 감쌉니다.

그럼 감싼 Layout이 부모가 되고

그룹원들(이미지들)이 자식이 되겠죠

여기서 부모 Layout에

duplicateParentState = true

라고 적어주면 자식들까지

부모의 속성을 물려받게 됩니다.

코드로 보면

이런식으로 됩니다

<?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">
    <RelativeLayout
        android:id="@+id/rl"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:duplicateParentState="true"
        >
        <ImageView
            android:id="@+id/smile"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/selector" />
        <ImageView
            android:id="@+id/below"
            android:layout_below="@+id/smile"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:src="@drawable/below"/>
    </RelativeLayout>
</RelativeLayout>

이렇게 적어주신후에

Relativelayout에 Click이벤트를

발생시키면 그 아래에 있는

ImageView 2개까지 전부

Click 효과를 얻게 됩니다

그 결과

각 이미지들에 넣었던

selector효과까지 적용되게

됩니다

자바코드는

아래처럼 Relative에

setOnClickListener를

달아주면 되겠죠

public class MainActivity extends AppCompatActivity
{
    ImageView smile;
    ImageView below;
    RelativeLayout rl;
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        smile = (ImageView) findViewById(R.id.smile);
        below = (ImageView) findViewById(R.id.below);
        rl = (RelativeLayout) findViewById(R.id.rl);
        rl.setOnClickListener(new View.OnClickListener()
        {
            @Override
            public void onClick(View v)
            {
                smile.setSelected(true);
                below.setSelected(true);
            }
        });
    }
}

결과를 보면서 끝내도록

하겠습니다.