12일차 | Material Design tabBar/toolBar, 자주 쓰는 레이아웃, API 통신하기를 위한 http 기본개념

shift+F6 이름 변경

https://material.io/components/tabs/android#using-tabs

Material Design

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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="match_parent"
    tools:context=".MainActivity">

    <!--   material.io-->
    
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">


    </com.google.android.material.tabs.TabLayout>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tabLayout" />


</androidx.constraintlayout.widget.ConstraintLayout>

 

MainActivity.java

package com.example.myviewpager;

import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;

import android.os.Bundle;
import android.util.Log;

import com.example.myviewpager.adapter.PagerAdapter;
import com.google.android.material.tabs.TabLayout;

public class MainActivity extends AppCompatActivity {

    TabLayout tabLayout;
    ViewPager viewPager;

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

    private void connectTabAndViewPager() {
        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                int position = tab.getPosition();
                viewPager.setCurrentItem(position);
                Log.d("TAG", "position : " + position);
            }
            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
            }
            @Override
            public void onTabReselected(TabLayout.Tab tab) {
            }
        });
    }

    private void addViewPager() {
        //  뷰 페이저는 adapter 를 연결해 주어야 한다.
        // new Adapter
        // viewPager.setAdapter(new Adapter);
        viewPager = findViewById(R.id.viewPager);
        PagerAdapter pagerAdapter = new PagerAdapter(getSupportFragmentManager(), 3);
        viewPager.setAdapter(pagerAdapter);
    }

    private void addTabLayout() {
        tabLayout = findViewById(R.id.tabLayout);
        tabLayout.addTab(tabLayout.newTab().setText("One"));
        tabLayout.addTab(tabLayout.newTab().setText("Two"));
        tabLayout.addTab(tabLayout.newTab().setText("Three"));
    }
}

---

Adapter 

> PagerAdapter.java

package com.example.myviewpager.adapter;

import android.util.Log;

import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;

import com.example.myviewpager.OneFragment;
import com.example.myviewpager.ThreeFragment;
import com.example.myviewpager.TwoFragment;

public class PagerAdapter extends FragmentPagerAdapter {

    public PagerAdapter(@NonNull FragmentManager fm, int behavior) {
        super(fm, behavior);
    }

    @NonNull
    @Override
    public Fragment getItem(int position) {
        Fragment fragment = null;

        switch (position) {
            case 0:
                Log.d("TAG", "Fragment 0");
                fragment = new OneFragment();
                break;
            case 1:
                Log.d("TAG", "Fragment 1");
                fragment = new TwoFragment();
                break;
            case 2:
                Log.d("TAG", "Fragment 2");
                fragment = new ThreeFragment();
                break;
        }
        return fragment;
    }

    @Override
    public int getCount() {
        return 3;
    }
}

---

fragment_one.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:background="@color/purple_200"
    tools:context=".OneFragment">


    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="@string/hello_blank_fragment" />

</FrameLayout>

fragment_two.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:background="@color/teal_200"
    tools:context=".TwoFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="@string/hello_blank_fragment" />

</FrameLayout>

fragment_three.xml

 

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:background="#FF9800"
    tools:context=".ThreeFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="@string/hello_blank_fragment" />

</FrameLayout>

Fragment 생성 방법

OneFragment.java 생성

TwoFragment.java 생성

ThreeFragment.java 생성

---

https://material.io/components/app-bars-top/android#using-top-app-bars

Material Design

 

https://material.io/components/bottom-navigation/android#using-bottom-navigation

Material Design

 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/topAppBar"
        style="@style/Widget.MaterialComponents.Toolbar.Primary"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:title="@string/page_title" />

    <LinearLayout
        android:id="@+id/mainContainer"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:orientation="vertical"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toTopOf="@id/bottomContainer"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/topAppBar">
    </LinearLayout>

    <LinearLayout
        android:id="@+id/bottomContainer"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent">

        <com.google.android.material.bottomnavigation.BottomNavigationView
            app:labelVisibilityMode="labeled"
            android:id="@+id/bottom_navigation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:menu="@menu/bottom_navigation_menu" />

    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

 

menu 폴더 생성

res 하위에 새로운 디렉토리 생성

 

bottom_navigation_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/favorite"
        android:icon="@drawable/ic_favorite_24dp"
        android:title="@string/favorite"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/search"
        android:icon="@drawable/ic_search_24dp"
        android:title="@string/search"
        app:showAsAction="ifRoom" />

    <item
        android:icon="@drawable/ic_baseline_more_vert_24dp"
        android:id="@+id/more"
        android:title="@string/more"
        app:showAsAction="never" />

</menu>

 

 

 

 

top_app_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/page_1"
        android:enabled="true"
        android:icon="@drawable/icon_1"
        android:title="@string/text_label_1"/>
    <item
        android:id="@+id/page_2"
        android:enabled="true"
        android:icon="@drawable/icon_2"
        android:title="@string/text_label_2"/>

    <item
        android:id="@+id/page_3"
        android:enabled="true"
        android:icon="@drawable/icon_3"
        android:title="@string/text_label_3"/>
    <item
        android:id="@+id/page_4"
        android:enabled="true"
        android:icon="@drawable/icon_4"
        android:title="@string/text_label_4"/>
</menu>

---

 

 

 

 

MainActivity.java

package com.example.mylayout;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;

import android.os.Bundle;
import android.util.Log;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.widget.LinearLayout;

import com.google.android.material.bottomnavigation.BottomNavigationItemView;
import com.google.android.material.bottomnavigation.BottomNavigationView;
import com.google.android.material.navigation.NavigationBarView;

public class MainActivity extends AppCompatActivity {

    Toolbar toolbar;
    BottomNavigationView bottomNavigationView;
    LinearLayout mainContainer;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initData();
        setSupportActionBar(toolbar);
        addListenerBottomView();
        replaceFragment(HomeFragment.newInstance());

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.top_app_bar, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()) {
            case R.id.favorite:
                //todo new Activity 만들어서 보내기 !!!
                Log.d("TAG", "favorite!!!");
                break;
            case R.id.search:
                Log.d("TAG", "search!!!");
                break;
            case R.id.more:
                Log.d("TAG", "more!!!");
                break;
        }
        return super.onOptionsItemSelected(item);
    }

    private void initData() {
        toolbar = findViewById(R.id.topAppBar);
        bottomNavigationView = findViewById(R.id.bottom_navigation);
        mainContainer = findViewById(R.id.mainContainer);
    }

    private void replaceFragment(Fragment fragment){
        // 프래그먼트를 동적으로 만들기 위해 필요한 준비
        //1. 프래그먼트 매니저를 가져오기(프래그먼트 트랜젝션을 시작할 수 있다.)
        FragmentManager fragmentManager = getSupportFragmentManager();

        //2. 프래그먼트 트랜젝션을 (작업의 단위)
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
        //3. replace, commit
        fragmentTransaction.replace(R.id.mainContainer, fragment);
        fragmentTransaction.commit();
    }

    private void addListenerBottomView(){
        bottomNavigationView.setOnItemSelectedListener(new NavigationBarView.OnItemSelectedListener(){
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item){
                switch (item.getItemId()){
                    case R.id.page_1:
                        replaceFragment(HomeFragment.newInstance());
                        //Log.d("TAG","page_1");
                        break;
                    case R.id.page_2:
                        replaceFragment(CallFragment.newInstance());
                        //Log.d("TAG","page_2");
                        break;
                    case R.id.page_3:
                        replaceFragment(PersonFragment.newInstance());
                        //Log.d("TAG","page_3");
                        break;
                    case R.id.page_4:
                        replaceFragment(LocationFragment.newInstance());
                        //Log.d("TAG","page_4");
                        break;
                }
                return true;
            }
        });
    }
}

---

CallFragment.java

package com.example.mylayout;

import android.os.Bundle;

import androidx.fragment.app.Fragment;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


public class CallFragment extends Fragment {

    public CallFragment() {
    }

    public static CallFragment newInstance() {
        CallFragment fragment = new CallFragment();
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        //todo 프래그먼트에 리사이클뷰 넣어보기
        //view homeItemView = inflater.inflate(R.layout.fragment_home, container, false);
        //recycleview
        //adapter
        //manager
        return inflater.inflate(R.layout.fragment_call, container, false);
    }
}

▶ 전에 만든 프래그먼트에 리사이클뷰 넣어보기 ◀

---

생성후 배경색만 바꾸기

---

1.인코딩

기존의 데이터 타입을 다른 데이터 타입으로 변경하는 것
문자열 인코딩
컴퓨터의 모든 데이터는 0과 1로 구성(아스키코드)
7bit 데이터에 대한 인코딩 표준(한계:유니코드)1~4(42억개) 

0101010 -> 문자표 
영어권은 다 아스키 코드 사용 가능
영어 1 byte 00000000
한글 3 byte 00000000 00000000 00000000
ㄴ 유니코드

2.통신 프로토콜
규격화된 상호작용에 적용되는 약속

3. http

클라이언트  / 서버 / host

4. http 메세지

5. https(HTTP over Secure sokcet layer)

www.naver.com <--- 도메인 주소

6. REST API (동작 방식 명명 method)
-GET : 자원을 요청
-POST : 데이터를 서버에 저장
-PUT : 데이터를 저장 / 수정
-DELETE 

 

스프링부트 JWT 블로그 가상 서버 셋팅하기

[출처] 스프링부트 JWT 블로그 가상 서버 셋팅하기|작성자 devnote1

 

http://lalacoding.site/init/user