도전!17 - 패널을 번갈아가며 보여주기

🚩구현할 것

자동으로 옆으로 움직이는 패널

ex.)웹사이트의 광고 배너

 

🙃멍청이짓

문제를 잘못 이해해서 시간을 많이 써버렸다.

나는 패널을 하나 만들고, 클래스를 새로 만든 뒤 인텐트로 값을 전달해서 ArrayList로 넣은 고객의 정보를 순서대로 나타나게 만들려고 했는데 그냥 패널을 2개 만들라고 한다.

 

🏠참고한 블로그

도전과제 17 : 패널을 번갈아가며 보여주기 (Do it 안드로이드 앱 프로그래밍) [JAVA]

 

 

 

 

1️⃣activity_main.xml

프레임레이아웃 안에 패널 2개를 생성한다.

🔹코드🔹

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="20dp">

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="0.9"
            android:text="고객정보"
            android:textSize="34sp" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="0.1"
            android:text="0/0"
            android:textAlignment="textEnd"
            android:textSize="24sp" />
    </LinearLayout>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:id="@+id/pannel1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:background="@drawable/box"
            android:orientation="horizontal"
            android:padding="10dp"
            android:weightSum="10">

            <ImageView
                android:id="@+id/imageView"
                android:layout_width="60dp"
                android:layout_height="120dp"
                android:layout_weight="3"
                app:srcCompat="@drawable/sheldon" />

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:layout_weight="7"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/name"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="쉘든"
                    android:textSize="24sp"
                    android:textStyle="bold" />

                <TextView
                    android:id="@+id/mobile"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="010-3141-5926"
                    android:textAlignment="textEnd"
                    android:textSize="20sp" />

                <TextView
                    android:id="@+id/address"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="텍사스"
                    android:textAlignment="textEnd"
                    android:textSize="20sp" />
            </LinearLayout>

        </LinearLayout>

        <LinearLayout
            android:id="@+id/pannel2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:background="@drawable/box"
            android:orientation="horizontal"
            android:padding="10dp"
            android:visibility="visible"
            android:weightSum="10">

            <ImageView
                android:id="@+id/imageView2"
                android:layout_width="60dp"
                android:layout_height="120dp"
                android:layout_weight="3"
                app:srcCompat="@drawable/penny" />

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:layout_weight="7"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/name2"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="페니"
                    android:textSize="24sp"
                    android:textStyle="bold" />

                <TextView
                    android:id="@+id/mobile2"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="010-5555-5555"
                    android:textAlignment="textEnd"
                    android:textSize="20sp" />

                <TextView
                    android:id="@+id/address2"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="네브레스카"
                    android:textAlignment="textEnd"
                    android:textSize="20sp" />
            </LinearLayout>

        </LinearLayout>
    </FrameLayout>

</LinearLayout>

 

 

 

 

2️⃣MainActivity.java

package com.example.doitmission_17;

public class MainActivity extends AppCompatActivity {
    LinearLayout pannel1, pannel2;
    TextView textViewnum;
    Animation show, disappear;
    Handler handler = new Handler();
    int x=1;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        pannel1 = findViewById(R.id.pannel1);
        pannel2 = findViewById(R.id.pannel2);
        disappear = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.right2left_move);
        show = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.right2left_stay);
        textViewnum=findViewById(R.id.textView2);
        textViewnum.setText("1/2"); // 현재 아이템/전체 아이템의 개수

        AnimThread thread = new AnimThread();
        thread.start();
    }

    class AnimThread extends Thread{
        @Override
        public void run() {

            while(true){
                try{
                    Thread.sleep(1000);
                }catch (Exception e){}

                if(x==1){
                    handler.post(new Runnable() {
                        @Override
                        public void run() {
                            pannel1.startAnimation(disappear);
                            pannel2.startAnimation(show);
                            textViewnum.setText(x+"/2");
                            x++;
                        }
                    });
                }
                else{
                    handler.post(new Runnable() {
                        @Override
                        public void run() {
                            pannel1.startAnimation(show);
                            pannel2.startAnimation(disappear);
                            textViewnum.setText(x+"/2");
                            x--;
                        }
                    });
                }
                
            }
        }
    }
}

 

• Animation 객체 만들기 : AnimationUtils.loadAnimation(getApplicationContext(), R.anim.애니메이션파일명)
• 새로운 스레드를 만들어서 실행

        AnimThread thread = new AnimThread();
        thread.start();

 

• 스레드 만들기

if와 else문에는 각각 애니메이션을 실행하기 위해 handler.post 메서드 사용, run 메서드 내부에 애니메이션 동작 작성.

 

 

 

 

3️⃣애니메이션 만들기

왼쪽에서 나타나는 애니메이션, 왼쪽으로 사라지는 애니메이션을 만들었다.

• right2left_stay (나타남)

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="100%"
        android:toXDelta="0%"
        android:duration="1000"
        android:repeatCount="0"
        android:fillAfter="true"
        />
</set>

• right2left_move (사라짐)

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromXDelta="0%"
    android:toXDelta="-100%"
    android:duration="1000"
    android:repeatCount="0"
    android:fillAfter="true"
    />
</set>

근데 나는 이렇게 해놓으면 fillAfter="true"니까, 고정된 상태에서 계속 왼쪽으로 이동해버려서 동작이 제대로 안 될 줄 알았는데 잘 된다. (왜지..? 일단 AVD 돌려보고 수정할려고 했는데)

 

 

 

 

4️⃣실행결과

잘 됨.

duration을 좀 더 큰 값으로 넣어주면 진짜 광고 배너처럼 보일듯.