KotlinでマテリアルデザインのViewを実装する

ディップ Advent Calendarの20日目です。

前回の続きになります。

せっかくなので、Kotlinでマテリアルデザイン関連のViewを実装するにはどうすればいいのか調べてみました。
基本的にはJavaで書いたソースコードをKotlinのプラグインに食わせるとKotlinに変換してくれるので、変換されたコードをKotlinっぽく書き直せるところは書き直してみます。
⇒というテーマで記事を書こうとしたのですが、KotlinプラグインのJava⇒Kotlinコード変換機能は大変優秀だったので、Null安全にかかわる変数宣言の辺り以外はほとんど直すところなかったです、Kotlinえらい。

Floating Action Button

Javaで書く場合

レイアウトファイルは基本的にJavaだろうとKotlinだろうと変わらないはず。

fragment_layout.xml

<android.support.design.widget.CoordinatorLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/blue_grey_600"
        android:transitionGroup="false">

    <include layout="@layout/map_description" />

    <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/ic_panorama"
            android:contentDescription="@string/action_panorama"
            android:visibility="invisible"/>

</android.support.design.widget.CoordinatorLayout>

MyFragment.java

package com.samples.fragment;

import android.content.Context;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.FloatingActionButton;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.transition.ChangeBounds;
import android.transition.Fade;
import android.transition.Transition;
import android.transition.TransitionInflater;
import android.transition.TransitionManager;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class MyFragment extends Fragment {

    public static final String TAG = "MyFragment";
    private FloatingActionButton mFloatingActionButton;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View contentView = inflater.inflate(R.layout.fragment_layout, container, false);
        mFloatingActionButton = (FloatingActionButton) contentView.findViewById(R.id.fab);
        mFloatingActionButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Log.d(TAG, "FAB Pushed");
            }
        });
        return contentView;
    }
}

Kotlinで書く場合

Kotlinのプラグインに食わせると以下のコードを吐き出してくれますが、直せるところは直してみる。

MyFragment.kt(プラグインが変換した直後)

class DetailFragment : Fragment(), DataView<Detail> {
    private var mFloatingActionButton: FloatingActionButton? = null

    override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?,
                              savedInstanceState: Bundle?): View? {
        val contentView = inflater!!.inflate(R.layout.fragment_detail, container, false)
        mFloatingActionButton = contentView.findViewById(R.id.fab) as FloatingActionButton
        mFloatingActionButton!!.setOnClickListener(View.OnClickListener {
            Log.d(TAG, "FAB Pushed")
        })
        return contentView
    }
}

View.OnClickListener自体はJavaのコードなので、SAM変換が使えます。
View.OnClickListenerをview ->に変えても大丈夫です。

MyFragment.kt(SAMに修正)

class DetailFragment : Fragment(), DataView<Detail> {
    private var mFloatingActionButton: FloatingActionButton? = null

    override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?,
                              savedInstanceState: Bundle?): View? {
        val contentView = inflater!!.inflate(R.layout.fragment_detail, container, false)
        mFloatingActionButton = contentView.findViewById(R.id.fab) as FloatingActionButton

        // View.OnClickListenerをview ->に変える
        mFloatingActionButton?.setOnClickListener {view ->
            Log.d(TAG, "FAB Pushed")
        }
        return contentView
    }
}

Navigation Drawer

Navigation DrawerはJavaとKotlinの実装の差異はほとんどない様子。

Javaで書く場合

MainActivity.java

package com.sample.activity;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.view.View;
import android.support.design.widget.NavigationView;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity
        implements NavigationView.OnNavigationItemSelectedListener {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
                this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
        drawer.setDrawerListener(toggle);
        toggle.syncState();

        NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
        navigationView.setNavigationItemSelectedListener(this);
    }

    @Override
    public void onBackPressed() {
        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        if (drawer.isDrawerOpen(GravityCompat.START)) {
            drawer.closeDrawer(GravityCompat.START);
        } else {
            super.onBackPressed();
        }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

    @SuppressWarnings("StatementWithEmptyBody")
    @Override
    public boolean onNavigationItemSelected(MenuItem item) {
        // Handle navigation view item clicks here.
        int id = item.getItemId();

        if (id == R.id.nav_camera) {
            // Handle the camera action
        } else if (id == R.id.nav_gallery) {

        } else if (id == R.id.nav_slideshow) {

        } else if (id == R.id.nav_manage) {

        } else if (id == R.id.nav_share) {

        } else if (id == R.id.nav_send) {

        }

        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        drawer.closeDrawer(GravityCompat.START);
        return true;
    }
}

Kotlinで書く場合

MainActivity.kt

package com.sample.activity

import android.os.Bundle
import android.support.design.widget.FloatingActionButton
import android.support.design.widget.Snackbar
import android.view.View
import android.support.design.widget.NavigationView
import android.support.v4.view.GravityCompat
import android.support.v4.widget.DrawerLayout
import android.support.v7.app.ActionBarDrawerToggle
import android.support.v7.app.AppCompatActivity
import android.support.v7.widget.Toolbar
import android.view.Menu
import android.view.MenuItem

class MainActivity : AppCompatActivity(), NavigationView.OnNavigationItemSelectedListener {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val toolbar = findViewById(R.id.toolbar) as Toolbar
        setSupportActionBar(toolbar)

        val drawer = findViewById(R.id.drawer_layout) as DrawerLayout
        val toggle = ActionBarDrawerToggle(
                this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close)
        drawer.setDrawerListener(toggle)
        toggle.syncState()

        val navigationView = findViewById(R.id.nav_view) as NavigationView
        navigationView.setNavigationItemSelectedListener(this)
    }

    override fun onBackPressed() {
        val drawer = findViewById(R.id.drawer_layout) as DrawerLayout
        if (drawer.isDrawerOpen(GravityCompat.START)) {
            drawer.closeDrawer(GravityCompat.START)
        } else {
            super.onBackPressed()
        }
    }

    override fun onCreateOptionsMenu(menu: Menu): Boolean {
        // Inflate the menu; this adds items to the action bar if it is present.
        menuInflater.inflate(R.menu.main, menu)
        return true
    }

    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        val id = item.itemId


        if (id == R.id.action_settings) {
            return true
        }

        return super.onOptionsItemSelected(item)
    }

    override fun onNavigationItemSelected(item: MenuItem): Boolean {
        // Handle navigation view item clicks here.
        val id = item.itemId

        if (id == R.id.nav_camera) {
            // Handle the camera action
        } else if (id == R.id.nav_gallery) {

        } else if (id == R.id.nav_slideshow) {

        } else if (id == R.id.nav_manage) {

        } else if (id == R.id.nav_share) {

        } else if (id == R.id.nav_send) {

        }

        val drawer = findViewById(R.id.drawer_layout) as DrawerLayout
        drawer.closeDrawer(GravityCompat.START)
        return true
    }
}

Activity Transition

Javaで書く場合

こちらを参照。
基本的にstyle.xmlとかAndroidManifest.xmlの設定、layout.xml周りはKotlinで書くにしても特に変わりはない様子。

Kotlinで書く場合

ActivityOptionsCompat.makeSceneTransitionAnimationを実行する箇所はJavaとはそれほど変わりがないですね。
Intentのインスタンス化もJavaでは
Intent intent = new Intent(MainActivity.this, ImaveDetailActivity.class);ですが、
Kotlinではval intent = Intent(this, ImageDetailActivity::class.java)でいけるようです。

MainActivity.kt

class MainActivity : AppCompatActivity(), NavigationView.OnNavigationItemSelectedListener {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        //imageview
        val imageview = findViewById(R.id.imageview_content) as ImageView
        imageview.setOnClickListener { view ->
            val options = ActivityOptionsCompat.makeSceneTransitionAnimation(
                    this,
                    findViewById(R.id.imageview_content),
                    getString(R.string.trans_name))
            val intent = Intent(this, ImageDetailActivity::class.java)
            ActivityCompat.startActivity(this, intent, options.toBundle())

        }
    }
}

さいごに

まずはJavaで無駄な処理を書いていない綺麗なコードで実装して、プラグインで変換するとKotlinのコードができるので、それを見て学習するのがいいかもですね。
Kotlinかわいい。