06-4. 뷰 컨테이너 연습

프로젝트1: 중복 슬라이딩드로어

슬라이딩드로어 - 슬라이딩드로어

<?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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="여긴 서랍 밖입니다."/>

    <SlidingDrawer
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:content="@+id/content1"
        android:handle="@+id/handler1">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="서랍 손잡이"
            android:id="@+id/handler1"/>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/content1"
            android:orientation="vertical"
            android:background="#00ff00">

            <LinearLayout
                android:layout_weight="2"
                android:layout_width="match_parent"
                android:layout_height="match_parent"/>

            <SlidingDrawer
                android:layout_weight="1"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:content="@+id/content2"
                android:handle="@+id/handler2">

                <Button
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/handler2"
                    android:text="안 서랍 손잡이"/>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:id="@+id/content2"
                    android:orientation="vertical"
                    android:background="#ff00ff">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="여긴 두번재 서랍 안 입니다."/>
                </LinearLayout>

            </SlidingDrawer>
        </LinearLayout>
    </SlidingDrawer>

</LinearLayout>

안에 있는 슬라이딩드로어를 아래를 기준으로 외부 슬라이딩드로어의 반만 열리도록 하고 싶었다.

그런데 방법을 도저히 모르겠어서 아무것도 든 거 없는 linearlayout을 하나 만들어서 layout_weight를 같이 줬다.

ㅠㅠ 뭔가 분명 slidingdrawer하나만으로도 할 수 있는 방법이 있을 것 같은데 못찾겟다....

 

그리고 의문점1 - 비율을 리니어랑 1:1로 했더니 리니어가 차지하는 비율이 더 커서 1:2로 바꿔주었다.

왜 리니어랑 1:1했는데도 리니어가 차지하는 비율이 더 큰걸까..? 아는 솨람..ㅠ

프로젝트1

 

프로젝트2: 액션바 탭 형식&inflate 사용

액션바 탭 버튼4개 - 개, 고양이, 물고기, 새 이모티콘

이미지 4개

 

<MainActivity.java>

package com.example.widget5;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.appcompat.app.ActionBar;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.FragmentTransaction;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity implements ActionBar.TabListener {
    ActionBar.Tab tab1, tab2, tab3, tab4;
    MyTabFragment myFrags[] = new MyTabFragment[4];

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //setContentView(R.layout.activity_main);
        ActionBar bar = getSupportActionBar();
        bar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

        View tabView1 = getLayoutInflater().inflate(R.layout.layout_actionbar, null);
        View tabView2 = getLayoutInflater().inflate(R.layout.layout_actionbar, null);
        View tabView3 = getLayoutInflater().inflate(R.layout.layout_actionbar, null);
        View tabView4 = getLayoutInflater().inflate(R.layout.layout_actionbar, null);

        ImageView tabImage1 = (ImageView)tabView1.findViewById(R.id.tabIcon);
        ImageView tabImage2 = (ImageView)tabView2.findViewById(R.id.tabIcon);
        ImageView tabImage3 = (ImageView)tabView3.findViewById(R.id.tabIcon);
        ImageView tabImage4 = (ImageView)tabView4.findViewById(R.id.tabIcon);

        tabImage1.setImageDrawable(getResources().getDrawable(R.drawable.tab1));
        tabImage2.setImageDrawable(getResources().getDrawable(R.drawable.tab2));
        tabImage3.setImageDrawable(getResources().getDrawable(R.drawable.tab3));
        tabImage4.setImageDrawable(getResources().getDrawable(R.drawable.tab4));

        tab1 = bar.newTab();
        tab1.setContentDescription("tab1");
        tab1.setTabListener(this);
        tab1.setCustomView(tabView1);
        bar.addTab(tab1);

        tab2 = bar.newTab();
        tab2.setContentDescription("tab2");
        tab2.setTabListener(this);
        tab2.setCustomView(tabView2);
        bar.addTab(tab2);

        tab3 = bar.newTab();
        tab3.setContentDescription("tab3");
        tab3.setTabListener(this);
        tab3.setCustomView(tabView3);
        bar.addTab(tab3);

        tab4 = bar.newTab();
        tab4.setContentDescription("tab4");
        tab4.setTabListener(this);
        tab4.setCustomView(tabView4);
        bar.addTab(tab4);


    }

    @Override
    public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
        MyTabFragment myTabFrag = null;

        if (myFrags[tab.getPosition()] == null) {
            myTabFrag = new MyTabFragment();
            Bundle data = new Bundle();
            data.putString("tabName", tab.getContentDescription().toString());
            myTabFrag.setArguments(data);
            myFrags[tab.getPosition()] = myTabFrag;
        }
        else
            myTabFrag = myFrags[tab.getPosition()];

        ft.replace(android.R.id.content, myTabFrag);
    }

    @Override
    public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) {

    }

    @Override
    public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) {

    }

    public static class MyTabFragment extends androidx.fragment.app.Fragment{
        String tabName;

        @Override
        public void onCreate(@Nullable Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            Bundle data = getArguments();
            tabName = data.getString("tabName");
        }

        @Nullable
        @Override
        public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
            View myView = inflater.inflate(R.layout.activity_main, null);

            ImageView image1 = (ImageView)myView.findViewById(R.id.image);

            if(tabName == "tab1") image1.setImageDrawable(getResources().getDrawable(R.drawable.image1));
            if(tabName == "tab2") image1.setImageDrawable(getResources().getDrawable(R.drawable.image2));
            if(tabName == "tab3") image1.setImageDrawable(getResources().getDrawable(R.drawable.image3));
            if(tabName == "tab4") image1.setImageDrawable(getResources().getDrawable(R.drawable.image4));

            return myView;
        }
    }
}

우선 이번에는 inflater를 사용해서 xml을 이용해 view를 만들었다.

그리고 액션바가 4개여서 icon을 그냥 setIcon()으로 하면 옆으로 넘어가기 때문에 이것 역시 inflater로 width가 정해진 ImageView가 들어있는 xml을 갖고 와서 크기를 지정해줬다. 그리고 setCustomView()로 뷰를 적용!

 

<layout_actoinbar.xml>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/tabIcon"
        android:layout_gravity="center"
        android:layout_width="20dp"
        android:layout_height="wrap_content"/>

</LinearLayout>

원래 마음은 weight를 줘서 딱 맞게 하고 싶었는데 잘 안됐다 ㅠㅠ

 

<activity_main.xml>

<?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:orientation="vertical"
    android:gravity="center"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:id="@+id/image"/>


</LinearLayout>

 

<themes.xml>

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.Widget5" parent="Theme.MaterialComponents.Light">
        <!-- Primary brand color. -->
        <item name="colorPrimary">#FCFF95</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

그리고 원래 액션바 색깔이 어두운 보라색인데 위젯 색깔이 검정색이다 보니 잘 안보여서 밝은 색으로 바꿨다.

그랬더니 글자가 원래 하얀색이어서 안보여서 글자색깔도 변경했다.

내가 원래 Dark 였는데 Dark의 경우 글자색이 안바뀐다고 해서 Light로 바꿨다.

사식 테마에서 색깔 지정하는게 어떤게 어디에 해당하는 값인지, 어떻게 하는건지는 잘 모르겠다.

프로젝트 2