[Android Studio] GridView Item 범위 선택하기

먼저 이전 글을 참고하시면 구현하려하는 목적을 아실 수 있습니다! ( 이전 글 : https://128june.tistory.com/47 )

[Android Studio] GridView 사용 예제 - 10분 간격의 시간 선택하기

---

이전 글에서 시간의 범위를 선택하였는데, 아무래도 예쁘지 않게 만들어져서 조금 다듬고 설명을 덧붙여 새로 만들었습니다!

 

먼저 전체 코드는 접은글로 넣겠습니다!

public class GridViewActivity2 extends AppCompatActivity {

    /* listview 관련 선언 */
    TextView hour;
    ListView listView1;
    ListViewAdapter listViewAdapter;
    TextView listView_position_1;
    TextView listView_position_2;
    TextView listView_reset;
    /* listview 관련 선언 */

    /* gridView 관련 선언 */
    Gridview_Adapter2 gridAdapter;
    GridView gridView1;

    TextView minute;
    TextView text_position, click_event, text_start, text_end;
    TextView tv_position_1, tv_position_2, tv_reset;

    // 클릭 세기
    int click;
    int point_1_index, point_2_index;
    /* gridView 관련 선언 */

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

        /* listview */
        listView1 = (ListView) findViewById(R.id.listView1);
        listViewAdapter = new ListViewAdapter(this);
        listView1.setAdapter(listViewAdapter);
        /* listview */

        /* Grid Adapter */
        gridView1 = (GridView) findViewById(R.id.gridView1);
        gridAdapter = new Gridview_Adapter2(this);
        gridView1.setAdapter(gridAdapter);
        /* Grid Adapter */

        // 변수 선언 ( click, point_1/2_index 를 0으로 초기화 )
        click = 0;
        point_1_index = 0;
        point_2_index = 0;

        // gridView onItemclick 이벤트
        gridView1.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int position, long l) {

                switch (click) {
                    // 1번 클릭 첫
                    case 0:
                        click++;
                        // position을 point_1_index 에 저장
                        point_1_index = position;

                        /* gridview text 검은색으로 변경 */
                        // position gridview_item 설정
                        tv_position_1 = (TextView) gridView1.getChildAt(point_1_index).findViewById(R.id.minute);

                        // text 검은색으로, bold 설정
                        tv_position_1.setTextColor(Color.parseColor("#111f42"));
                        tv_position_1.setPaintFlags(tv_position_1.getPaintFlags() | Paint.FAKE_BOLD_TEXT_FLAG);

                        // 배경변경
                        gridView1.getChildAt(point_1_index).setBackgroundResource(R.drawable.rrrr_bg_60_e6eaf3);
                        /* gridview text 검은색으로 변경 */

                        /* listview text 검은색으로 변경 */
                        // position listview_item 설정
                        listView_position_1 = (TextView) listView1.getChildAt(point_1_index/6).findViewById(R.id.hour);
                        // text 검은색으로, bold 설정
                        listView_position_1.setTextColor(Color.parseColor("#111f42"));
                        listView_position_1.setPaintFlags(listView_position_1.getPaintFlags() | Paint.FAKE_BOLD_TEXT_FLAG);
                        /* listview text 검은색으로 변경 */

                        break;
                    // 2번 클릭
                    case 1:
                        click++;
                        // position을 point_2_index 에 저장
                        point_2_index = position;

                        // point_1_index가 point_2_index보다 클 때 위치 바꿔줌
                        if (point_1_index >= point_2_index) {
                            int tmp = point_1_index;
                            point_1_index = point_2_index;
                            point_2_index = tmp;
                        }

                        // 변경사항
                        for (int i = point_1_index; i <= point_2_index; i++) {

                            // point_1_index 와 point_2_index 가 같으면 for 구문 끝
                            if (point_1_index == point_2_index) return;

                            /* gridview 설정 */
                            // gridview_item 설정
                            tv_position_2 = (TextView) gridView1.getChildAt(i).findViewById(R.id.minute);

                            // 글자색 변경 및 진하게
                            tv_position_2.setTextColor(Color.parseColor("#111f42"));
                            tv_position_2.setPaintFlags(tv_position_2.getPaintFlags() | Paint.FAKE_BOLD_TEXT_FLAG);

                            // 배경 변경
                            // point_1_index => rrss / point_2_index => ssrr / 나머지 color #e6eaf3
                            if (i == point_1_index) {
                                gridView1.getChildAt(i).setBackgroundResource(R.drawable.rrss_bg_60_e6eaf3);
                            } else if (i == point_2_index) {
                                gridView1.getChildAt(i).setBackgroundResource(R.drawable.ssrr_bg_60_e6eaf3);
                            } else {
                                gridView1.getChildAt(i).setBackgroundColor(Color.parseColor("#e6eaf3"));
                            }
                            /* gridview 설정 */

                            /* listview text 검은색으로 변경 */
                            // text 검은색으로, bold 설정
                            listView_position_2 = (TextView) listView1.getChildAt(i/6).findViewById(R.id.hour);
                            listView_position_2.setTextColor(Color.parseColor("#111f42"));
                            listView_position_2.setPaintFlags(listView_position_2.getPaintFlags() | Paint.FAKE_BOLD_TEXT_FLAG);
                            /* listview text 검은색으로 변경 */
                        }
                        break;
                    // 3번 클릭 =>  초기화
                    case 2:
                        click++;
                        point_1_index = 0;
                        point_2_index = 0;

                        // gridAdapter의 gridview_item 갯수만큼 반복
                        for (int i = 0; i < gridAdapter.getCount(); i++) {
                            /* gridview 설정 */
                            // gridView의 배경 색을 원래대로 투명하게
                            gridView1.getChildAt(i).setBackgroundColor(Color.parseColor("#00000000"));

                            /* gridView gridview_item 글자색 원래대로 설정 */
                            // gridview_item 설정
                            tv_reset = (TextView) gridView1.getChildAt(i).findViewById(R.id.minute);
                            // gridview_item 글자색 원래대로
                            tv_reset.setTextColor(Color.parseColor("#7c869c"));
                            // gridview_item 글자 굵기 nomal로 변환
                            tv_reset.setTypeface(null, Typeface.NORMAL);
                            /* gridView gridview_item 글자색 원래대로 설정 */
                            /* gridview 설정 */

                            /* listview text 검은색으로 변경 */
                            // text / bold 원래대로
                            listView_reset = (TextView) listView1.getChildAt(i/6).findViewById(R.id.hour);
                            listView_reset.setTextColor(Color.parseColor("#7c869c"));
                            listView_reset.setTypeface(null, Typeface.NORMAL);
                            /* listview text 검은색으로 변경 */

                        }


                        break;
                    default:
                        click = 0;
                        break;
                }

                // switch 구문이 끝나면 click이 3일 때 0으로 reset

                if (click == 3) {
                    click = 0;
                }

            }
        });

    }

    public class Gridview_Adapter2 extends BaseAdapter {

        Context ctx;
        LayoutInflater inflater;
        List<String> text;


        // 생성자 설정
        public Gridview_Adapter2(Context c) {
            ctx = c;
            text = new ArrayList<>();

            for (int i = 0; i < 10; i++) {
                for (int j = 0; j < 6; j++) {
                    if (j == 0) {
                        text.add("정각");
                    } else {
                        text.add(j + "0분");
                    }
                }
            }
            inflater = (LayoutInflater) c.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        }

        // text의 개수를 반환합니다.
        @Override
        public int getCount() {
            return text.size();
        }

        // position위치의 gridview_item 값을 알 수 있습니다.
        @Override
        public Object getItem(int position) {
            return text.get(position);
        }

        // item의 position을 알 수 있습니다.
        @Override
        public long getItemId(int position) {
            return position;
        }

        // view 화면을 설정해줍니다.
        @Override
        public View getView(final int position, View convertView, ViewGroup parent) {
            if (convertView == null)
                convertView = inflater.inflate(R.layout.gridview_item, null);

            minute = (TextView) convertView.findViewById(R.id.minute);
            minute.setText(text.get(position));

            return convertView;
        }


    }

    public class ListViewAdapter extends BaseAdapter{

        Context context;
        LayoutInflater inflater;
        List<String> hour_list;

        public ListViewAdapter (Context c){
            context = c;
            hour_list = new ArrayList<>();

            for(int i = 0; i < 10; i++){
                hour_list.add(String.format("%02d시", i+9 ));
            }

            inflater = (LayoutInflater) c.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        }

        @Override
        public int getCount() {
            return hour_list.size();
        }

        @Override
        public Object getItem(int position) {
            return hour_list.get(position);
        }

        @Override
        public long getItemId(int position) {
            return position;
        }

        @Override
        public View getView(int position, View view, ViewGroup viewGroup) {

            if (view == null)
                view = inflater.inflate(R.layout.listview_item, null);

            hour = (TextView)view.findViewById(R.id.hour);
            hour.setText(hour_list.get(position));

            return view;
        }
    }
}

---

1. activity_grid_view2.xml

다음과 같이 왼쪽과 오른쪽으로 나누었습니다.

왼쪽은 Listview로 시간을 표현하였고, 오른쪽은 Gridview로 분을 표현하였습니다.

또한 각각의 background 로 색이 다른 round 모서리 xml을 만들어 설정하였습니다.

Round 모서리를 만드는 방법은 다음 페이지를 참고하시면 됩니다. -> https://128june.tistory.com/50

[Android Studio] 둥근 도형 만들기 ( Shape Drawable )

코드는 다음과 같습니다.

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

        <ListView
            android:id="@+id/listView1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="4"
            android:background="@drawable/rrrr_bg_10_e6eaf3"
            android:paddingTop="20dp"
            android:paddingBottom="20dp"
            android:dividerHeight="5dp"
            android:divider="@color/bg_transparency"
            />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_weight="1"
            android:background="@drawable/rrrr_bg_10_f5f6fa"
            android:paddingLeft="15dp"
            android:paddingTop="20dp"
            android:paddingRight="15dp"
            android:paddingBottom="20dp">

            <GridView
                android:id="@+id/gridView1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:numColumns="6"
                android:verticalSpacing="5dp" />
        </LinearLayout>

    </LinearLayout>

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

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:background="@color/bg_f5f6fa">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="시작 시간"/>
                
        </LinearLayout>
    </LinearLayout>

---

2. ListView와 GridView의 각 item을 설정합니다.

 

- listview_item.xml

<TextView
  android:id="@+id/hour"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:gravity="center"
  android:padding="5dp"
  android:text="시간"
  android:textColor="#7c869c" />

 

- gridview_item.xml

<TextView
  android:id="@+id/minute"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:gravity="center"
  android:padding="5dp"
  android:text="10분 단위"
  android:textColor="#7c869c" />

---

3. GridViewActivity2.java - listview와 gridview를 설정해줍니다.

 

먼저 다음과 같이 선언을 해준 후

public class GridViewActivity2 extends Activity {
    
    /* listview 관련 선언 */
    TextView hour;
    ListView listView1;
    ListViewAdapter listViewAdapter;
    TextView listView_position_1;
    TextView listView_position_2;
    TextView listView_reset;
    /* listview 관련 선언 */

    /* gridView 관련 선언 */
    Gridview_Adapter2 gridAdapter;
    GridView gridView1;

    TextView minute;
    TextView text_position, click_event, text_start, text_end;
    TextView tv_position_1, tv_position_2, tv_reset;


    // 클릭 세기
    int click;
    int point_1_index, point_2_index;
    /* gridView 관련 선언 */

onCreate에 listview와 gridview를 설정해줍니다.

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

    /* listview */
    listView1 = (ListView) findViewById(R.id.listView1);
    listViewAdapter = new ListViewAdapter(this);
    listView1.setAdapter(listViewAdapter);

    /* listview */

    /* Grid Adapter */
    gridView1 = (GridView) findViewById(R.id.gridView1);
    gridAdapter = new Gridview_Adapter2(this);
    gridView1.setAdapter(gridAdapter);
    /* Grid Adapter */

    // 변수 선언 ( click, point_1/2_index 를 0으로 초기화 )
    click = 0;
    point_1_index = 0;
    point_2_index = 0;


    // gridView onItemclick 이벤트
    gridView1.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> adapterView, View view, int position, long l) {

            switch (click) {
                // 1번 클릭 첫
                case 0:
                    click++;
                    // position을 point_1_index 에 저장
                    point_1_index = position;

                    /* gridview text 검은색으로 변경 */
                    // position gridview_item 설정
                    tv_position_1 = (TextView) gridView1.getChildAt(point_1_index).findViewById(R.id.minute);

                    // text 검은색으로, bold 설정
                    tv_position_1.setTextColor(Color.parseColor("#111f42"));
                    tv_position_1.setPaintFlags(tv_position_1.getPaintFlags() | Paint.FAKE_BOLD_TEXT_FLAG);

                    // 배경변경
                    gridView1.getChildAt(point_1_index).setBackgroundResource(R.drawable.rrrr_bg_60_e6eaf3);
                    /* gridview text 검은색으로 변경 */

                    /* listview text 검은색으로 변경 */
                    // position listview_item 설정
                    listView_position_1 = (TextView) listView1.getChildAt(point_1_index/6).findViewById(R.id.hour);
                    // text 검은색으로, bold 설정
                    listView_position_1.setTextColor(Color.parseColor("#111f42"));
                    listView_position_1.setPaintFlags(listView_position_1.getPaintFlags() | Paint.FAKE_BOLD_TEXT_FLAG);
                    /* listview text 검은색으로 변경 */

                    break;
                // 2번 클릭
                case 1:
                    click++;
                    // position을 point_2_index 에 저장
                    point_2_index = position;

                    // point_1_index가 point_2_index보다 클 때 위치 바꿔줌
                    if (point_1_index >= point_2_index) {
                        int tmp = point_1_index;
                        point_1_index = point_2_index;
                        point_2_index = tmp;
                    }

                    // 변경사항
                    for (int i = point_1_index; i <= point_2_index; i++) {

                        // point_1_index 와 point_2_index 가 같으면 for 구문 끝
                        if (point_1_index == point_2_index) return;

                        /* gridview 설정 */
                        // gridview_item 설정
                        tv_position_2 = (TextView) gridView1.getChildAt(i).findViewById(R.id.minute);

                        // 글자색 변경 및 진하게
                        tv_position_2.setTextColor(Color.parseColor("#111f42"));
                        tv_position_2.setPaintFlags(tv_position_2.getPaintFlags() | Paint.FAKE_BOLD_TEXT_FLAG);

                        // 배경 변경
                        // point_1_index => rrss / point_2_index => ssrr / 나머지 color #e6eaf3
                        if (i == point_1_index) {
                            gridView1.getChildAt(i).setBackgroundResource(R.drawable.rrss_bg_60_e6eaf3);
                        } else if (i == point_2_index) {
                            gridView1.getChildAt(i).setBackgroundResource(R.drawable.ssrr_bg_60_e6eaf3);
                        } else {
                            gridView1.getChildAt(i).setBackgroundColor(Color.parseColor("#e6eaf3"));
                        }
                        /* gridview 설정 */

                        /* listview text 검은색으로 변경 */
                        // text 검은색으로, bold 설정
                        listView_position_2 = (TextView) listView1.getChildAt(i/6).findViewById(R.id.hour);
                        listView_position_2.setTextColor(Color.parseColor("#111f42"));
                        listView_position_2.setPaintFlags(listView_position_2.getPaintFlags() | Paint.FAKE_BOLD_TEXT_FLAG);
                        /* listview text 검은색으로 변경 */
                    }
                    break;
                // 3번 클릭 =>  초기화
                case 2:
                    click++;
                    point_1_index = 0;
                    point_2_index = 0;

                    // gridAdapter의 gridview_item 갯수만큼 반복
                    for (int i = 0; i < gridAdapter.getCount(); i++) {
                        /* gridview 설정 */
                        // gridView의 배경 색을 원래대로 투명하게
                        gridView1.getChildAt(i).setBackgroundColor(Color.parseColor("#00000000"));

                        /* gridView gridview_item 글자색 원래대로 설정 */
                        // gridview_item 설정
                        tv_reset = (TextView) gridView1.getChildAt(i).findViewById(R.id.minute);
                        // gridview_item 글자색 원래대로
                        tv_reset.setTextColor(Color.parseColor("#7c869c"));
                        // gridview_item 글자 굵기 nomal로 변환
                        tv_reset.setTypeface(null, Typeface.NORMAL);
                        /* gridView gridview_item 글자색 원래대로 설정 */
                        /* gridview 설정 */

                        /* listview text 검은색으로 변경 */
                        // text / bold 원래대로
                        listView_reset = (TextView) listView1.getChildAt(i/6).findViewById(R.id.hour);
                        listView_reset.setTextColor(Color.parseColor("#7c869c"));
                        listView_reset.setTypeface(null, Typeface.NORMAL);
                        /* listview text 검은색으로 변경 */

                    }


                    break;
                default:
                    click = 0;
                    break;
            }

            // switch 구문이 끝나면 click이 3일 때 0으로 reset

            if (click == 3) {
                click = 0;
            }

        }
    });

}

자세하게 설명해놓았으니 읽어보시면 됩니다!

 

이제 각 view ( listview / gridview ) 에 대한 adapter를 설정합니다.

 

Gridview_Adapter2

public class Gridview_Adapter2 extends BaseAdapter {

    Context ctx;
    LayoutInflater inflater;
    List<String> text;

    // 생성자 설정
    public Gridview_Adapter2(Context c) {
        ctx = c;
        text = new ArrayList<>();

        for (int i = 0; i < 10; i++) {
            for (int j = 0; j < 6; j++) {
                if (j == 0) {
                    text.add("정각");
                } else {
                    text.add(j + "0분");
                }
            }
        }

        inflater = (LayoutInflater) c.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

    }

    // text의 개수를 반환합니다.
    @Override
    public int getCount() {
        return text.size();
    }

    // position위치의 gridview_item 값을 알 수 있습니다.
    @Override
    public Object getItem(int position) {
        return text.get(position);
    }

    // item의 position을 알 수 있습니다.
    @Override
    public long getItemId(int position) {
        return position;
    }

    // view 화면을 설정해줍니다.
    @Override
    public View getView(final int position, View convertView, ViewGroup parent) {
        if (convertView == null)
            convertView = inflater.inflate(R.layout.gridview_item, null);

        minute = (TextView) convertView.findViewById(R.id.minute);
        minute.setText(text.get(position));

        return convertView;
    }


}

 

ListViewApdater

public class ListViewAdapter extends BaseAdapter{

    Context context;
    LayoutInflater inflater;
    List<String> hour_list;


    public ListViewAdapter (Context c){
        context = c;
        hour_list = new ArrayList<>();

        for(int i = 0; i < 10; i++){
            hour_list.add(String.format("%02d시", i+9 ));
        }

        inflater = (LayoutInflater) c.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }

    @Override
    public int getCount() {
        return hour_list.size();
    }

    @Override
    public Object getItem(int position) {
        return hour_list.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View view, ViewGroup viewGroup) {

        if (view == null)
            view = inflater.inflate(R.layout.listview_item, null);

        hour = (TextView)view.findViewById(R.id.hour);
        hour.setText(hour_list.get(position));

        return view;
    }
}

---

4. 결과는 다음과 같습니다.

 

밑에 시작시간은 추가적으로 작업해볼 사항입니다!