尝试用kotlin做一个app（一）

1.先添加一下anko库，添加库之后，右上角提示，sync now...点击即可

依赖：implementation "org.jetbrains.anko:anko:$anko_version"

版本：ext.anko_version='0.10.8'

2.新建Activity和Fragment的两个基类，方便以后使用

abstract class BaseActivity: AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(getLayoutId()) initData(); onListener(); } abstract fun getLayoutId(): Int;//继承此类必须先实现此方法

    protected open fun initData(){ } protected open fun onListener() { }

//

abstract class BaseFragment:Fragment() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) initData() } override fun onCreateView( inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle? ): View? { return initView(); } override fun onActivityCreated(savedInstanceState: Bundle?) { super.onActivityCreated(savedInstanceState) onListener() } abstract fun initView():View?

    protected open fun initData(){ } protected open fun onListener(){ } }

3.底部导航

方案一：bottombar

依赖：implementation 'com.roughike:bottom-bar:2.3.1'

activity_main.xml改成LinearLayout布局,设置垂直布局,并设置android:orientation="vertical"

<FrameLayout android:id="@+id/contentContainer" android:layout_width="match_parent" android:layout_height="0px" android:layout_weight="1"/>


    <com.roughike.bottombar.BottomBar android:id="@+id/bottomBar" android:layout_width="match_parent" android:layout_height="56dp" app:bb_tabXmlResource="@xml/bottombar_tabs"/>

 

新建xml Directory,添加bottombar_tabs.xml

<?xml version="1.0" encoding="utf-8"?>
<tabs>
    <tab id="@+id/tab_homepage" icon="@drawable/homepage_icon" title="主页" />
    <tab id="@+id/tab_favorites" icon="@drawable/favorites_icon" title="收藏" />
    <tab id="@+id/tab_message" icon="@drawable/message_icon" title="消息" />
    <tab id="@+id/tab_personal" icon="@drawable/personal_icon" title="我的" />
</tabs>

 

添加图标资源到drawable-xxhdpi目录中（不能直接添加到drawable中）

添加监听很简单

 override fun initData() { bottomBar.setOnTabSelectListener{ //it即是tab的id // println(it)
        }

 

接下来准备点击切换的四个fragment,都继承自BaseFragment，例如

class FavoritesFragment:BaseFragment() { override fun initView(): View? { var textView:TextView=TextView(activity) //getActivity()返回与之关联的activity
        textView.text="收藏"
        return textView } }

 

再准备一个管理fragment的类FragmentManage

class FragmentManage { fun getFragment(tab_id:Int):BaseFragment?{ when(tab_id){ R.id.tab_homepage->return HomePageFragment() R.id.tab_favorites->return FavoritesFragment() R.id.tab_message->return MessageFragment() R.id.tab_personal->return Personal() } return null } }

 

优化后的代码，创建单例模式，采用懒加载定义变量

class FragmentManage private constructor(){ val homePageFragmeng by lazy{HomePageFragment()} val favoritesFragment by lazy{FavoritesFragment()} val messageFragment by lazy{MessageFragment()} val PersonalFragment by lazy{Personal()} companion object{ val fragmentManage by lazy{ FragmentManage() } } fun getFragment(tab_id:Int):BaseFragment?{ when(tab_id){ R.id.tab_homepage->return homePageFragmeng R.id.tab_favorites->return favoritesFragment R.id.tab_message->return messageFragment R.id.tab_personal->return PersonalFragment } return null } }

 

这里可能找不到id，重启一下就可以了。R资源路径app\build\generated\not_namespaced_r_class_sources\debug\r\com\vocus\justtest

在MainActivity中设置对bottomBar的监听，并动态添加fragment

override fun initData() { bottomBar.setOnTabSelectListener { //it即是tab的id // println(it)
            val transAction = supportFragmentManager.beginTransaction() //transAction.replace(R.id.contentContainer,FragmentManage().getFragment(it) as BaseFragment, it.toString())
            transAction.replace(R.id.contentContainer,FragmentManage.fragmentManage.getFragment(it)!!,it.toString()) transAction.commit() } }

效果：

 

 

 方案二：BottomNavigationView

null

4.主界面，设置HomePageFragment

设置状态栏背景透明

null

广告图片轮播（使用ViewPager)

设置homepagefragment布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent">
    <androidx.viewpager.widget.ViewPager android:id="@+id/vp_homePageAd" android:layout_width="match_parent" android:layout_height="300dp">
    </androidx.viewpager.widget.ViewPager>

    <LinearLayout android:id="@+id/dot_container" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" android:layout_centerHorizontal="true" android:layout_alignBottom="@+id/vp_homePageAd" android:layout_marginBottom="10dp">

    </LinearLayout>

</RelativeLayout>

 在HomepageFragment中引入布局

 

class HomeFragment: BaseFragment(){
    override fun initView(): View? {
        return View.inflate(activity, R.layout.fragment_home,null)
    }
}

 

新建HomePageAdAdapter类

class HomePageAdAdapter(): PagerAdapter(){ private val imageViewList=ArrayList<ImageView>() constructor(imageViewList:ArrayList<ImageView>):this(){ this.imageViewList.addAll(imageViewList) } override fun isViewFromObject(view: View, `object`: Any): Boolean { return view==`object` } override fun instantiateItem(container: ViewGroup, position: Int): Any { // var textView= TextView(container.context) // textView.text="test" // container.addView(textView) // return textView
 container.addView(imageViewList.get(position)) return imageViewList.get(position) } override fun getCount(): Int { return imageViewList.size } override fun destroyItem(container: ViewGroup, position: Int, `object`: Any) { container.removeView(`object` as View) } }

 

在HomePageFragment中添加代码

• 重写onListener方法（在onActivityCreated的生命周期里）

• 定义资源

 var imagesId=listOf(R.drawable.pic1,R.drawable.pic2,R.drawable.pic3,R.drawable.pic4,R.drawable.pic5) //定义五个图片控件，用于加载图片资源
        var imageViewList=ArrayList<ImageView>() for(i in 0 until 5){ var imageView:ImageView=ImageView(activity) imageView.setImageResource(imagesId[i]) imageViewList.add(imageView) }

• 添加监听

// var vp_homePage:ViewPager=view!!.findViewById(R.id.vp_homePageAd) // vp_homePage.adapter=HomePageAdAdapter()
        vp_homePageAd.adapter=HomePageAdAdapter(imageViewList) //

        //添加页面改变监听
 vp_homePageAd.addOnPageChangeListener(object :ViewPager.OnPageChangeListener{ override fun onPageScrollStateChanged(state: Int) { } //页面滚动的时候
 override fun onPageScrolled( position: Int, positionOffset: Float, positionOffsetPixels: Int ) { } override fun onPageSelected(position: Int) { //添加圆点导航
 addDots(position) } }) }

 

• 增加圆点导航方法

//偷懒的方法

fun addDots(position:Int){ dot_container.removeAllViews() var dots=arrayOf<TextView>(TextView(activity),TextView(activity),TextView(activity),TextView(activity),TextView(activity)) dots.forEach { it.text="." it.setTextColor(Color.GRAY) it.textSize=30f } for(i in 0 until 5) { dot_container.addView(dots[i]) } dots[position].setTextColor(Color.WHITE) }

 

The specified child already has a parent. You must call removeView() on the child's parent first

我在把同一个TextView多次添加到布局中发生此错误，因为添加一次之后TextView就有parent了，直接在for循环中使用(textView.parent as ViewGroup?)!!.removeView(textView)也不行，因为循环的第二次会把第一次添加的移除。所以只能创建多个textview

错误代码为：

fun addDots(position:Int){ var dots=ArrayList<TextView>() var textView=TextView(context) textView.text="." textView.setTextColor(Color.RED) textView.textSize=30f for(i in 0 until 5) { if ((textView.parent as ViewGroup?) != null) { (textView.parent as ViewGroup?)!!.removeView(textView) } dot_container.addView(textView) } }

 

继续完善

• 增加无限翻页

将getCount()返回值设置为Integer.MAX_VALUE，资源列表用到position取值的地方，要按5取模position%5，这样可以实现向后无限翻页；为了保证向前也能无限翻页，将PagerView的当前页设置为Integer.MAX_VALUE/2，同时-Integer.MAX_VALUE/2%5保证为5的倍数

vp_homePageAd.currentItem=Integer.MAX_VALUE/2-Integer.MAX_VALUE/2%5

• 循环播放

val handler: Handler =object:Handler(){ override fun handleMessage(msg: Message) { super.handleMessage(msg) vp_homePageAd.currentItem+=1 sendEmptyMessageDelayed(0,4000) } }

 

调用：handler.sendEmptyMessageDelayed(0,4000)

• 添加点击事件参考

var flag:Int?=null
        vp_homePageAd.setOnTouchListener(object:View.OnTouchListener{
            override fun onTouch(p0: View?, p1: MotionEvent?): Boolean {
                //Toast.makeText(context,"-x:${p1.x},y:${p1.y}",Toast.LENGTH_SHORT).show();

                when(p1!!.action){
                    MotionEvent.ACTION_DOWN->flag=0
                    //MotionEvent.ACTION_UP->flag=1
                    MotionEvent.ACTION_MOVE->flag=2
                }
                println(flag.toString())
                if(p1!!.action==MotionEvent.ACTION_UP&& flag==0){
                    val currentPage=vp_homePageAd.currentItem%5
                    when(currentPage+1){
                        1->Toast.makeText(context,"1",Toast.LENGTH_SHORT).show()
                        2->Toast.makeText(context,"2",Toast.LENGTH_SHORT).show()
                        3->Toast.makeText(context,"3",Toast.LENGTH_SHORT).show()
                        4->Toast.makeText(context,"4",Toast.LENGTH_SHORT).show()
                        5->Toast.makeText(context,"5",Toast.LENGTH_SHORT).show()

                    }
                }
                return false
            }

（每次响应点击事件都会调用这个函数，比如按下，松开会调用两次该函数，所以flag应该是个全局变量）

•  其他

·可以给每个页面添加文字说明
这个跟添加原点导航差不多，

·用户按住某个页面时，应该停止轮播
可以增加一个isLoop的布尔值变量，在ViewPager触摸监听中，按下的时候，设置isLoop=false，放开的时候设置isLoop=true；同时在handleMessage中判断，当isLoop为true时，才发送消息。

val handler:android.os.Handler=object :android.os.Handler(){
        override fun handleMessage(msg: Message) {
            super.handleMessage(msg)
            println("handler:"+isLoop)
            if(isLoop) {
                if(vp_home_ad!=null){
                    vp_home_ad.currentItem += 1
                }
                //
            }
            sendEmptyMessageDelayed(0, 4000)//不管isLoop是真假，都间隔4s发送一次消息，只是当为假的时候，不跳页

} }

 效果

源码：
https://files.cnblogs.com/files/vocus/kotlin_app_1.zip

链接：https://pan.baidu.com/s/1zx5IXnD74ySe_bYM9F17xQ
提取码：hmg5

 

问题补充：

第一次进去程序没有圆点导航，需要初始化一下，即事先调用一次addDots函数

 

Handler函数中调用vp_homePageAd加一个非空判断，因为切换底部导航tab的时候，vp_homePageAd变为空