1) 프래그먼트 패키지 생성

 

프래그먼트를 보관할 패키지를 자바 폴더에 있는 com.example. 프로젝트명 파일에 생성한다

 

 

2) 프래그먼트 생성

블랭크 프래그먼트 3개를 방금 생성한 패키지에 생성한다 

주의 사항 

Include factory methods? 선택 해체

Include interface callbacks? 선택 해체

 

 

 

3)material 임포트 하기

projectStructure를 켠다

Ctrl+Shift+alt+s 단축키

 

1. 왼쪽 메뉴에서 Dependencies를 선택한다 

2. all Dependencies 아래 + 마크를 클릭한다

3. Library Dependancy를 클릭한다

 

material이라는 키워드로 검색 후

com.google.android.material을 선택하고

버전은 최신 버전을 선택한다

 

projectStructure의 장점은

빠르게 변화하는 안드로이드 메소드 덕분에

구 버전을 사용하면 생기는

오류들로부터 자유로울 수 있다

 

 

4) 메인 액티비티 레이아웃에 탭 레이아웃 추가

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
 
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabGravity="fill"
        app:tabMode="fixed"
        app:tabTextColor="#ffffff"
        app:tabSelectedTextColor="#ffffff"
        android:background="@color/colorPrimaryDark"
        />
 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/view_pager"
/>
 
</LinearLayout>
 
 

 

ConstraintLayout을 Linearlayout  방향 vertical

로 변경하고 탭 레이아웃과 뷰 페이저를 추가한다.

여기서 뷰 페이저의 역할은

프래그먼트들을 가로로 이어 붙여주고

탭 레이아웃에서 선택하면

선택된 프래그먼트로 이동하는데 부드럽게 넘어가는 모션이

추가된다 축측하고 있습니다.

 

이어서 자바 파일에 

탭 레이아웃과 뷰 페이저를 선언한다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
package com.example.test_tablayout;
 
 
 
 
public class MainActivity extends AppCompatActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        TabLayout tabLayout = findViewById(R.id.tab_layout);
        ViewPager viewPager = findViewById(R.id.view_pager);
    }
}
 
 
 

 

 

 

이어서 자바 폴더에 뷰 페이저 어뎁터 클래스를 생성한다.

 

extends FragmentPagerAdapter 부모 클래스를 추가한다.

재목에 빨간 줄이 생기는데, Alt+Enter를 클릭하면

필요한 메서드들을 자동적으로 추가하는 기능이 있다.

나머지는 밑의 코드를 참고하여 추가하면된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
package com.example.test_tablayout;
 
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
 
 
public class ViewPagerAdapter extends FragmentPagerAdapter {
    private final List<Fragment> fragmentList = new ArrayList<>();
    private final List<String> fragmentListTitle = new ArrayList<>();
 
    public ViewPagerAdapter(@NonNull FragmentManager fm) {
        super(fm);
    }
 
    @NonNull
    @Override
    public Fragment getItem(int position) {
        return fragmentList.get(position);
    }
 
    @Override
    public int getCount() {
        return fragmentListTitle.size();
    }
 
    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        return fragmentListTitle.get(position);
    }
 
    public void AddFragment(Fragment fragment, String Title){
        fragmentList.add(fragment);
        fragmentListTitle.add(Title);
    }
}
 
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
 

AddFragment는 뷰 페이저에 프래그먼트와 이름을 같이 추가하기 위해 생성된 메서드이다.

 

 

5) 자바 코드로 돌아와서 뷰 페이저 어뎁터 설정을 해준다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
package com.example.test_tablayout;
 
 
 
import com.example.test_tablayout.Fragments.BlankFragment;
import com.example.test_tablayout.Fragments.BlankFragment2;
import com.example.test_tablayout.Fragments.BlankFragment3;
 
public class MainActivity extends AppCompatActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        TabLayout tabLayout = findViewById(R.id.tab_layout);
        ViewPager viewPager = findViewById(R.id.view_pager);
        
        ViewPagerAdapter viewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager());
        viewPagerAdapter.AddFragment(new BlankFragment(), "First Fmt");
        viewPagerAdapter.AddFragment(new BlankFragment2(), "Second Fmt");
        viewPagerAdapter.AddFragment(new BlankFragment3(), "Third Fmt");
        
        viewPager.setAdapter(viewPagerAdapter);
        tabLayout.setupWithViewPager(viewPager);
 
    }
}
 
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
 

뷰 페이저 어뎁터를 생성하고

프래그먼트와 타이틀 정보를 입력한다.

 

그리고 뷰 페이저에 뷰페이저 어댑터를 넣는다.

그리고 탭 레이아웃에 뷰 페이저를 넣는다.

 

6) 프레그먼트들의 레이아웃에 자기 이름 입력

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?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"
    tools:context=".Fragments.BlankFragment">
 
    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="fragment1" />
 
</FrameLayout>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter

나머지 2와 3도 설정하십시오

 

결과 확인

 

소스코드는 깃허브에 있습니다.

https://github.com/3210439/test_tablayout

 

3210439/test_tablayout

Contribute to 3210439/test_tablayout development by creating an account on GitHub.

github.com

 

참조한 자료

https://youtu.be/PJWBnkWudEI

 

1) 프로젝트 생성

 

 

2) res> menu directory 생성

 

 

3) menu 폴더에 xml 파일 생성

 

4) 메뉴 xml 파일 코드 작성

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    <item
        android:title="첫 번째"
        android:icon="@drawable/ic_launcher_background"
        android:id="@+id/first_opt"/>
    <item
        android:title="두 번째"
        android:icon="@drawable/ic_launcher_background"
        android:id="@+id/second_opt"/>
    <item
        android:title="세 번째"
        android:icon="@drawable/ic_launcher_background"
        android:id="@+id/third_opt"/>
</menu>
 
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter

여기서 아이템 설정에 android:showAsAction="ifRoom" 을 하게 되면 

만약, 툴바(앱바)에 아이콘이 표시될 공간이 있다면 표시해주게 된다.

 

onCreateOptionsMenu 오버라이드 하기

1
2
3
4
5
6
7
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.mymenu,menu);
        return true;
    }
 

 

inflater를 통해 메뉴를 풍선에 바람 넣어 형태를 만들듯 툴바에 메뉴 아이콘이 생기고

클릭하게 되면 메뉴가 표시된다.

 

 

6) onOptionsItemSelected

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    @Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()){
            case R.id.first_opt:
                Toast.makeText(getApplicationContext(), "첫번째", Toast.LENGTH_SHORT).show();
                return true;
            case R.id.second_opt:
                Toast.makeText(getApplicationContext(), "두번째", Toast.LENGTH_SHORT).show();
                return true;
            case R.id.third_opt:
                Toast.makeText(getApplicationContext(), "새번째", Toast.LENGTH_SHORT).show();
                return true;
            default:
                return super.onOptionsItemSelected(item);
        }
   }

 

결과 확인

 

 

아이템을 클릭하게 되면 토스트 메시지가 출력되게 된다.

 

 

 

소스코드는 깃허브에서 다운 가능합니다.

https://github.com/3210439/toolbar_test

 

3210439/toolbar_test

Contribute to 3210439/toolbar_test development by creating an account on GitHub.

github.com

 

+ Recent posts