ViewPagerを使ってCanvasにお絵かきしてみる[その1]

以前作成したシンプルお絵かきを、ViewPagerを使用して複数画面にお絵かきが出来るように改変してみました。

お試し実装したイメージはこんな感じです。
今回は何回かに分けて記事にしていきたいと思いますので、良ければ参考頂ければと思います。

では、実際にサンプルコードを記述していきます。

CustViewPager.java

public class CustViewPager extends ViewPager {

    public CustViewPager(@NonNull Context context) {
        super(context);
    }

    public CustViewPager(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

}
CustPagerAdapter.java

public class CustPagerAdapter extends PagerAdapter {
    private Context mContext;
    private ArrayList<Integer> mList;

    public CustPagerAdapter(Context context) {
        mContext = context;
        mList = new ArrayList<Integer>();
    }

    public void add(Integer item) {
        mList.add(item);
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        Integer item = mList.get(position);
        TextView textView = new TextView(mContext);
        container.addView(textView);
        return textView;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((View) object);
    }

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

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == (View) object;
    }

}
MainActivity.java

public class MainActivity extends AppCompatActivity {
    CustViewPager mViewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        CustPagerAdapter adapter = new CustPagerAdapter(this);
        adapter.add(Color.WHITE);
        adapter.add(Color.WHITE);
        mViewPager = (CustViewPager) findViewById(R.id.view_pager);
        mViewPager.setAdapter(adapter);
    }
}

ViewPagerrを拡張したクラスと、PageAdapterを拡張したクラスを作成します。
Activity(MainActivity)でPageAdapterクラスを生成し、addします。
※今回2ページ用意するので、2回addしています。
最後にadapterをViewPagerクラスにセットすることで骨組みはOKです。

activity_main.xml

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

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

        <hogehoge.CustViewPager
            android:id="@+id/view_pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

レイアウトの指定は上記のように、拡張したViewPagerを指定します。

ここまででフリックで画面切替が出来る状態になりました。
あとは好みでレイアウトを横向きにするなどしてみるとよいと思います。

次回は、今回作成したViewに対して描画を行っていきます。

mana99 について

30代のシステムエンジニア 仕事以外にAndroidアプリを定期的にリリース モットーは「最短&シンプル」
カテゴリー: ノウハウ タグ: , パーマリンク