[안드로이드] #1 바텀네비게이션뷰 (주식, 코인 평단가 계산기 + 크롤링 + 바텀네비게이션뷰)

안녕하세요

 

이번 시간에는 주식 평단가 계산기를 만들어 볼게요

주식 평단가 계산기만 만드는 것이 아니라 현재 코스피, 코스닥 지수와 네이버 금융 주요 뉴스를 크롤링하는 것을 포스팅하겠습니다.

 

총 3편으로 나눠서 업로드하겠습니다.

1. 바텀네비게이션뷰 화면 구성

2. 주식 평단가 계산기

3. 크롤링

 

오늘은 바텀네비게이션뷰 화면 구성을 해보겠습니다.

 

바텀네비게이션뷰를 이용해 2개의 프래그먼트를 만들어 주겠습니다.

 

 

천천히 제가 하는 것을 따라 하시면 위와 같은 결과물을 만들 수 있습니다.

 

menu를 만들어줍니다.

res→new→Directory에서 menu라는 새로운 Directory를

 

그러면 menu라는 파일이 생성됩니다. 여기에 bottom_menu.xml파일을 만들어줍니다.

 bottom_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/action_cal"
        android:enabled="true"
        android:icon="@drawable/ic_baseline_calculate_24"
        android:title="계산기"/>
    <item
        android:id="@+id/action_search"
        android:enabled="true"
        android:icon="@drawable/ic_baseline_search_24"
        android:title="정보"/>

</menu>

그러면 icon에서 오류가 나올 겁니다.

이미지가 없어서 그런 겁니다. 이미지를 추가해 줍니다.

res→drawable→new→Vector Asset→Clip Art에서 원하는 이미지를 선택한 후 Finish 하면 이미지가 생성됩니다.

저는 calculate와 search 이미지를 생성했습니다.

 

 

메인 xml도 화면 구성을 해줍니다.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <FrameLayout
            android:id="@+id/main_frame"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="bottom"
        android:orientation="vertical">

        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottomNavi"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:itemIconTint="#000000"
            app:itemTextColor="#000000"
            app:menu="@menu/bottom_menu"
            android:layout_alignParentBottom="true"/>

    </LinearLayout>
</RelativeLayout>

 

이후

frag1.xml과 frag2.xml 파일을 만들어주고 여기에 클릭 시 화면이 변화하는 것을 알기 위해 TextView를 만들어 주었습니다.

frag1.xml입니다.

frag2도 frag1과 비슷하기 때문에 포스터에는 생략하겠습니다.

<?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"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="계산기" />
</LinearLayout>

 

 

 

이제는 java파일을 만들어 봅시다.

MainActivity.java

public class MainActivity extends AppCompatActivity {
    private BottomNavigationView bottomNavigationView;
    private FragmentManager fm;
    private FragmentTransaction ft;
    private Frag1 frag1;
    private Frag2 frag2;

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

        ActionBar actionBar = getSupportActionBar();
        actionBar.hide();

        bottomNavigationView = findViewById(R.id.bottomNavi);
        bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()){
                    case R.id.action_cal:
                        setFrag(0);
                        break;
                    case R.id.action_search:
                        setFrag(1);
                        break;
                }
                return true;
            }
        });
        frag1 = new Frag1();
        frag2 = new Frag2();

        setFrag(0);
    }
    private void setFrag(int i) {
        fm = getSupportFragmentManager();
        ft = fm.beginTransaction();
        switch (i){
            case(0):
                ft.replace(R.id.main_frame,frag1);
                ft.commit();
                break;
            case(1):
                ft.replace(R.id.main_frame,frag2);
                ft.commit();
                break;

        }
    }
}

 

앱 상단에 액션바를 제거했습니다.

ActionBar actionBar = getSupportActionBar();
actionBar.hide();

 

 

바텀네비게이션뷰를 클릭하면 setFrag로 인수 0 또는 1을 전달해줍니다.

bottomNavigationView = findViewById(R.id.bottomNavi);
bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()){
            case R.id.action_cal:
                setFrag(0);
                break;
            case R.id.action_search:
                setFrag(1);
                break;
        }
        return true;
    }
});

 

만약 0을 받았다면 frag1이 실행되고 1을 받았다면 frag2를 실행합니다.

private void setFrag(int i) {
    fm = getSupportFragmentManager();
    ft = fm.beginTransaction();
    switch (i){
        case(0):
            ft.replace(R.id.main_frame,frag1);
            ft.commit();
            break;
        case(1):
            ft.replace(R.id.main_frame,frag2);
            ft.commit();
            break;

    }
}

 

 

Frag1.java 와 Frag2.java를 만들어줍니다.

Frag1.java입니다.

Frag2도 Frag1과 비슷하기 때문에 포스터에는 생략하겠습니다.

 

public class Frag1 extends Fragment {
    private View view;
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        view = inflater.inflate(R.layout.frag1,container,false);
        return view;
    }
}

 

 

여기까지 잘 따라오셨다면 바텀네비게이션뷰가 정상적으로 작동할 것입니다.

 

그러면 다음 포스터에는 주식 평단가 계산기를 frag1에 만들어 보겠습니다.

수고하셨습니다!