智能管家App kotlin版(6)——新闻头条文章查看开发

既然是一款轻松娱乐的应用怎么能没有一个新闻列表呢？我们listview实现新闻列表 ，通过webview去加载新闻详情，本文章会讲解Picasso图片加载，以及webview的一些基本应用,自定义加载进度条！

此篇文章完成后效果展示：

一.Picasso封装

1.添加Picasso依赖

implementation 'com.squareup.picasso:picasso:2.5.2'

2.在utils包下，创建PicassoUtils类

3.在PicassoUtils类类中，对Picasso进行封装

package com.zrc.smartbutler.utils

import android.content.Context
import android.graphics.Bitmap
import android.widget.ImageView
import com.squareup.picasso.Picasso
import com.squareup.picasso.Transformation

/**
 *项目名：  SmartButler
 *包名：    com.zrc.smartbutler.utils
 *文件名：  PicassoUtils
 *创建者：  张如成
 *创建时间： 2020/5/16 9:30
 *描述：    Picasso封装
 */
class PicassoUtils {
    //默认加载图片
    open fun loadImaheView(mContext: Context?, url: String?, imageView: ImageView?): Unit {
        Picasso.with(mContext).load(url).into(imageView)
    }

    //默认加载图片 指定大小
    open fun loadImageViewSize(mContext: Context?, url: String?, width: Int, height: Int, imageView: ImageView?): Unit {
        Picasso.with(mContext).load(url).config(Bitmap.Config.RGB_565).resize(width, height).centerCrop().into(imageView)
    }

    //加载图片 有默认图片
    fun loadImageViewHolder(mContext: Context?, url: String?, loadImg: Int, errorImg: Int, imageView: ImageView?) {
        Picasso.with(mContext).load(url).placeholder(loadImg).error(errorImg).into(imageView)
    }

    //裁剪图片
    fun loadImageViewCrop(mContext: Context?, url: String?, imageView: ImageView?) {
        Picasso.with(mContext).load(url).transform(CropSquareTransformation()).into(imageView)
    }

    //按比例裁剪 矩形
    class CropSquareTransformation : Transformation {
        override fun transform(source: Bitmap): Bitmap {
            val size = Math.min(source.width, source.height)
            val x = (source.width - size) / 2
            val y = (source.height - size) / 2
            val result = Bitmap.createBitmap(source, x, y, size, size)
            if (result != source) {
                //回收
                source.recycle()
            }
            return result
        }

        override fun key(): String {
            return "lgl"
        }
    }
}

至此，Picasso封装完成！！！

二.列表布局实现

对于列表布局，其实是比较简单的，只是一个简单的ListView即可。

1.打开我们之前创建的fragment_wechat.xml，对里面代码进行修改：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

   <ListView
       android:id="@+id/mListView"
       android:layout_width="match_parent"
       android:layout_height="match_parent"/>

</LinearLayout>

2.编写完主碎片的布局，我们需要考虑，ListView中每一个item的布局。在layout包下，创建wechat_item.xml,在这里面编写每一个ListView布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_vertical"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/iv_img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"/>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center_vertical"
        android:orientation="vertical"
        android:padding="20dp">

        <TextView
            android:id="@+id/tv_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:maxLines="1"
            android:text="某某县发生某某事"
            android:textColor="@color/colorPrimary"
            android:textSize="16sp"/>

        <TextView
            android:id="@+id/tv_source"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="right"
            android:text="人民日报"/>

    </LinearLayout>

</LinearLayout>

至此，列表布局完成！！！

三.接口数据获取与解析

在我们有了列表布局之后，我们就要去申请接口数据进行适配器解析，然后再绑定在ListView上，但是在此之前，为了以后能够更好的扩展，需要创建一个实体类，下面是具体操作步骤。

1.在entity包下，创建WeChatData类，作为新闻头条的实体类

package com.zrc.smartbutler.entity

/**
 *项目名：  SmartButler
 *包名：    com.zrc.smartbutler.entity
 *文件名：  WeChatData
 *创建者：  张如成
 *创建时间： 2020/5/15 11:29
 *描述：    新闻头条的实体类
 */
data class WeChatData (val title:String,val source:String,val imgUrl:String,val newUrl:String)

2.在adapter包下，创建WeChatAdapter适配器

package com.zrc.smartbutler.adapter

import android.app.Activity
import android.content.Context
import android.util.Log
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.view.WindowManager
import android.widget.ArrayAdapter
import android.widget.ImageView
import android.widget.TextView
import com.squareup.picasso.Picasso
import com.zrc.smartbutler.R
import com.zrc.smartbutler.entity.WeChatData
import com.zrc.smartbutler.utils.L
import com.zrc.smartbutler.utils.PicassoUtils

/**
 *项目名：  SmartButler
 *包名：    com.zrc.smartbutler.adapter
 *文件名：  WeChatAdapter
 *创建者：  张如成
 *创建时间： 2020/5/15 11:28
 *描述：    新闻头条
 */
class WeChatAdapter(activity: Activity,val resourceId:Int, data:ArrayList<WeChatData>) : ArrayAdapter<WeChatData>(activity,resourceId,data){
    var width:Int = 0
    var height:Int = 0
    var wm:WindowManager?=null
    //获取屏幕的宽高
    init {
        wm = context.getSystemService(Context.WINDOW_SERVICE) as WindowManager
        width = wm!!.defaultDisplay.width
        height = wm!!.defaultDisplay.height
    }
    override fun getView(position: Int, convertView: View?, parent: ViewGroup): View {
        val view:View
        val viewHolder:ViewHolder

        if(convertView==null){
            view = LayoutInflater.from(context).inflate(resourceId,parent,false)
            val iv_img:ImageView = view.findViewById(R.id.iv_img)
            val tv_title:TextView = view.findViewById(R.id.tv_title)
            val tv_source:TextView = view.findViewById(R.id.tv_source)
            viewHolder = ViewHolder(iv_img,tv_title,tv_source)
            view.tag = viewHolder
        }else{
            view = convertView
            viewHolder = view.tag as ViewHolder
        }

        val fruit = getItem(position)
        if(fruit!=null){
            viewHolder.tv_title.text = fruit.title
            viewHolder.tv_source.text = fruit.source
            //加载图片
            //Picasso.with(context).load(fruit.imgUrl).into(viewHolder.iv_img)
            //PicassoUtils().loadImaheView(context,fruit.imgUrl,viewHolder.iv_img)
            PicassoUtils().loadImageViewSize(context,fruit.imgUrl,width/3,height/7,viewHolder.iv_img)
        }
        return view
    }

    inner class ViewHolder(val iv_img: ImageView,val tv_title: TextView,val tv_source: TextView)
}

3.编写Kotlin交互代码，这里说一下大体思路：先是使用RxVolley进行网络数据，然后进行json解析，解析完成之后，存入一个List集合中，作为数据源，传入上一步完成的适配器中，然后让ListView绑定适配器即可。

package com.zrc.smartbutler.fragment

import android.content.Intent
import android.os.Bundle
import android.util.Log
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import com.kymjs.rxvolley.RxVolley
import com.kymjs.rxvolley.client.HttpCallback
import com.zrc.smartbutler.R
import com.zrc.smartbutler.adapter.WeChatAdapter
import com.zrc.smartbutler.entity.WeChatData
import com.zrc.smartbutler.ui.WebViewActivity
import com.zrc.smartbutler.utils.L
import com.zrc.smartbutler.utils.StaticClass
import kotlinx.android.synthetic.main.fragment_wechat.view.*
import org.json.JSONException
import org.json.JSONObject
import java.util.*
import kotlin.collections.ArrayList

/**
 *项目名：  SmartButler
 *包名：    com.zrc.smartbutler.fragment
 *文件名：  WechatFragment
 *创建者：  张如成
 *创建时间： 2020/5/6 9:16
 *描述：    新闻头条
 */
class WechatFragment : Fragment(){

    private val mList = ArrayList<WeChatData>()
    //标题
    private val mListTitle = ArrayList<String>()
    //地址
    private val mListUri = ArrayList<String>()
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        val view: View = inflater.inflate(R.layout.fragment_wechat,null)
        findView(view)
        return view
    }

    //初始化View
    private fun findView(view: View) {
        //解析接口
        //val url = "http://v.juhe.cn/weixin/query?key=" + StaticClass().WECHAT_KEY.toString() + "&ps=100"
        val url   = "http://v.juhe.cn/toutiao/index?type=top&key="+ StaticClass().WECHAT_KEY
        //http://v.juhe.cn/toutiao/index?type=top&key=APPKEY
        RxVolley.get(url, object : HttpCallback() {
            override fun onSuccess(t: String) {
                //Toast.makeText(getActivity(), t, Toast.LENGTH_SHORT).show();
                L().i("wechat json:$t")
                parsingJson(t,view)
            }
        })

      
    }

    //解析Json
    private fun parsingJson(t: String,view: View) {
        try {
            val jsonObject = JSONObject(t)
            val jsonresult = jsonObject.getJSONObject("result")
            val jsonList = jsonresult.getJSONArray("data")
            for (i in 0 until jsonList.length()) {
                val json = jsonList[i] as JSONObject
                val titlr = json.getString("title")
                val firstImg = json.getString("thumbnail_pic_s")
                val source = json.getString("author_name")
                val url = json.getString("url")
                val data:WeChatData = WeChatData(titlr,source,firstImg,url)
                mList.add(data)
                mListTitle.add(titlr)
                mListUri.add(url)
            }
            val adapter = WeChatAdapter(activity!!,R.layout.wechat_item, mList)
            view.mListView.setAdapter(adapter)
        } catch (e: JSONException) {
            e.printStackTrace()
        }
    }
}

至此，接口数据获取与解析完成！！！

四.WebView网页详情处理

进行到这里，布局界面已经有了。但是，点击之后，没有任何效果，这里，我们用WebView来实现！！
1.在ui包下创建WebViewActivity，进行展示具体新闻内容
2.设置ListView点击事件，让他进行跳转到WebViewActivity，并传入相应数据

//点击事件
        view.mListView.setOnItemClickListener { parent, view, position, id ->
            val intent = Intent(activity, WebViewActivity::class.java)
            intent.putExtra("title", mListTitle.get(position))
            intent.putExtra("url", mListUri.get(position))
            startActivity(intent)
        }

3.设置WebViewActivity布局，里面放一个进度条和WebView控件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@color/white"
    android:gravity="center_horizontal"
    tools:context=".ui.WebViewActivity">

    <ProgressBar
        android:id="@+id/mProgressBar"

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <WebView
        android:id="@+id/mWebView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>
</LinearLayout>

4.编写WebViewActivity交互代码：

package com.zrc.smartbutler.ui

import android.os.Bundle
import android.view.View
import android.webkit.WebChromeClient
import android.webkit.WebResourceRequest
import android.webkit.WebView
import android.webkit.WebViewClient
import com.zrc.smartbutler.R
import kotlinx.android.synthetic.main.activity_web_view.*

//新闻详情
class WebViewActivity : BaseActivty() {

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

        initView()
    }

    //初始化View
    private fun initView() {
        val title = intent.getStringExtra("title")
        val url = intent.getStringExtra("url")
        //设置一个标题
        supportActionBar?.title = title

        //进行加载网页逻辑
        //支持js
        mWebView.settings.javaScriptEnabled =  true
        //支持缩放
        mWebView.settings.setSupportZoom(true)
        //
        mWebView.settings.builtInZoomControls = true
        //接口回调
        mWebView.webChromeClient = WebViewClient()
        //加载网页
        mWebView.loadUrl(url)

        //本地显示
        mWebView.webViewClient = object : android.webkit.WebViewClient() {
            override fun shouldOverrideUrlLoading(view: WebView, request: WebResourceRequest): Boolean {
                view.loadUrl(url)
                //我接受这个事件
                return true
            }
        }

    }

    inner  class WebViewClient :WebChromeClient(){
        //进度条变化的监听
        override fun onProgressChanged(view: WebView?, newProgress: Int) {
            if(newProgress==100){
                mProgressBar.visibility = View.GONE
            }
            super.onProgressChanged(view, newProgress)
        }
    }
}

至此，WebView网页详情处理完成！！！

新闻头条文章查看完成，下篇文章将针对美女图片加载进行开发，欢迎关注后续更新！！！