Go to Qiita Advent Calendar 2024 Top
LoginSignup
8
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@homae

Recyclerviewの中身を折り畳んだり引き伸ばしたり

Last updated at Posted at 2017-06-07

はじめに

recyclerviewの中身を折りたたんだり，引き伸ばしたい！

device.gif

参考文献

こちらを参考にいたしました．
https://github.com/thoughtbot/expandable-recycler-view
こっちの方が分かりやすいです！！

実装

まず，build.gradleライブラリを追加します．

build.gradle
dependencies {
    compile 'com.thoughtbot:expandablerecyclerview:1.3'
    compile 'com.android.support:recyclerview-v7:25.3.1'
}

次に，親専用のViewHolderと子専用のViewHolderを作成致します．
ViewHolderとは，データと画面に表示するViewに関連性を持たせます．
もちろん親Viewと子Viewが存在するため，2つのViewHolderが必要となります．

Parent_ViewHolder.java
package ここは自分のパッケージ
import android.view.View;
import android.widget.TextView;

import com.thoughtbot.expandablerecyclerview.viewholders.GroupViewHolder;

public class Parent_ViewHolder extends GroupViewHolder {

    private TextView text1;

    public Parent_ViewHolder(View itemView) {//親viewのid取得
        super(itemView);
        text1 = (TextView)itemView.findViewById(R.id.parenttext);
    }
    public void set(String i){//取得したidに変化を施す
        text1.setText(i);
    }
}
Child_ViewHolder.java
package ここは自分のパッケージ;

import android.view.View;
import android.widget.TextView;

import com.thoughtbot.expandablerecyclerview.viewholders.ChildViewHolder;

public class Child_ViewHolder extends ChildViewHolder {

    private TextView text1;

    public Child_ViewHolder(View itemView) {//子viewのid取得
        super(itemView);
        text1 = (TextView)itemView.findViewById(R.id.childtext);
    }
    public void set(String i){//取得したidに変化を施す
        text1.setText(i);
    }
}

そして，これらを関連付けるadapterを作成致します．
親と子が関連するところ，つまり，家(home)みたいな感じでしょうか？:raised_hand:

Home_Adapter.java
package ここは自分のパッケージ;

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

import com.thoughtbot.expandablerecyclerview.ExpandCollapseController;
import com.thoughtbot.expandablerecyclerview.ExpandableRecyclerViewAdapter;
import com.thoughtbot.expandablerecyclerview.models.ExpandableGroup;

import java.util.List;

public class Home_Adapter extends ExpandableRecyclerViewAdapter<Parent_ViewHolder, Child_ViewHolder> {

    private ExpandCollapseController expandCollapseController;

    public Home_Adapter(List<? extends ExpandableGroup> groups) {
        super(groups);
        this.expandCollapseController = new ExpandCollapseController(expandableList, this);
    }

    @Override
    public Parent_ViewHolder onCreateGroupViewHolder(final ViewGroup parent, final int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.parent_item, parent, false);
        return new Parent_ViewHolder(view);
    }

    @Override
    public Child_ViewHolder onCreateChildViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.child_item, parent, false);
        return new Child_ViewHolder(view);
    }

    @Override
    public void onBindGroupViewHolder(Parent_ViewHolder holder, int flatPosition, ExpandableGroup group) {
        holder.set(String.valueOf(flatPosition));//Parent_viewHolderで作成した関数を呼び出す
    }

    @Override
    public void onBindChildViewHolder(Child_ViewHolder holder, int flatPosition, ExpandableGroup group, int childIndex) {
        holder.set(String.valueOf(childIndex));//Child_viewHolderで作成した関数を呼び出す
    }

}
  1. onCreateViewHolder
    指定されたviewに対し，指定したxmlファイルの内容を拡張します．
  2. onBindViewHolder
    RecyclerViewによって呼び出され，指定された位置にデータを表示します。

つぎに，関連させる，レイアウトを作成致します．

parent_item.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <TextView
        android:background="@color/colorPrimaryDark"
        android:id="@+id/parenttext"
        android:text="親"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize" />
</LinearLayout>
child_item.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <TextView
        android:id="@+id/childtext"
        android:text="子"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize" />
</LinearLayout>

次に，adapterとレイアウトはできましたので，プログラムとして実行させましょう．:point_up:

MainActivity.java
package jp.app.oomae.hisaki.expandable_recyclerview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.RecyclerView;

import static jp.app.oomae.hisaki.expandable_recyclerview.Home.makehome;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.recyclerview);

        RecyclerView recyclerView = (RecyclerView)findViewById(R.id.recyclerview);
        recyclerView.setLayoutManager(new GridLayoutManager(this, 1));
        Home_Adapter adapter = new Home_Adapter(makehome());
        recyclerView.setAdapter(adapter);//アダプターをセット
    }
}

そして，メイン画面のrecyclerviewを設置しましょう．

recyclerview.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <android.support.v7.widget.RecyclerView
        android:background="@color/colorAccent"
        android:id="@+id/recyclerview"
        android:scrollbars="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

次に，表示する親と子の個数を決めてやりましょう．
今回は静的な実装ですがここを変えると，動的になると思います．たぶん、、、
まず，親と子のそれぞれのデータ群を実装します．

Parent.java
package 自分のやつー;
import com.thoughtbot.expandablerecyclerview.models.ExpandableGroup;
import java.util.List;

public class Parent extends ExpandableGroup<Child> {
    public Parent(String title, List<Child> items) {
        super(title, items);
    }
}
Child.java
package 自分のやーつ;

import android.os.Parcel;
import android.os.Parcelable;

public class Child implements Parcelable {
    private String name;

    public Child(String name) {
        this.name = name;
    }

    protected Child(Parcel in) {
        name = in.readString();
    }

    @Override
    public void writeToParcel(Parcel dest, int flags) {
        dest.writeString(name);
    }

    @Override
    public int describeContents() {
        return 0;
    }

    public static final Creator<Child> CREATOR = new Creator<Child>() {
        @Override
        public Child createFromParcel(Parcel in) {
            return new Child(in);
        }

        @Override
        public Child[] newArray(int size) {
            return new Child[size];
        }
    };
}

次に，Parent.javaとChild.javaを関連づける家を作りましょう．(親が複数，子が複数の家はありえないですが、、、宿泊施設みたいな感じですかね？？)

Home.java
package jp.app.oomae.hisaki.expandable_recyclerview;

import java.util.Arrays;
import java.util.List;

public class Home{
    final private static int parents_num = 9;//親の数
    final private static int child_num = 5;//子の数

    public static List<Parent> makehome() {
        Parent[] num = new Parent[parents_num];
        for(int i = 0; i < parents_num; i++) {
            num[i] = new Parent("parent" + String.valueOf(i),receive_child());
        }
        return Arrays.asList(num);
    }

    public static List<Child> receive_child() {
        Child[] num = new Child[child_num];
        for(int i = 0; i < child_num; i++) {
            num[i] = new Child("child" + String.valueOf(i));
        }
        return Arrays.asList(num);
    }
}

ここで子のデータと親のデータを結合します．

コードは以上になります．
非難や批判，募集してます．:muscle_tone3:

今回のコード

8
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
8
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?