以往文章

android 仿微信demo————微信啟動頁實作

android 仿微信demo————注冊功能實作（移動端）

android 仿微信demo————注冊功能實作（服務端）

android 仿微信demo————登錄功能實作（移動端）

android 仿微信demo————登錄功能實作（服務端）

android 仿微信demo————微信主界面實作

移動端微信訊息頁實作

在上一篇中主界面實作說過微信四個頁面中間都是是fragment的，并且四個fragment的布局都還沒實作，所以這一篇主要實作微信訊息界面的實作（第一個fragment）

微信訊息頁是可以上下滑動，每一個串列最多都有可顯示五個資料，還可以點擊串列
在這里插入圖片描述

要實作上訴功能只需要在fragment布局中使用ListView,然后給ListView指定一個Item布局即可

修改微信訊息界面fragment布局
weixin_fragment.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:divider="@drawable/main_list_divider_line"
        android:dividerHeight="1.5px"
        android:layout_marginBottom="50dp">
    </ListView>
</LinearLayout>

上述代碼自定義了一個分割線

微信訊息頁每一個串列都有分割線，而系統自帶的分割線是充滿螢屏寬度的，所以要自己定義一個分割線

自定義分割線main_list_divider_line.xml
在這里插入圖片描述

main_list_divider_line.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:left="80dp"
        android:right="0dp">
        <shape android:shape="rectangle" >
            <solid android:color="#33000000" />
        </shape>
    </item>
</layer-list>

創建微信訊息界面fragment中ListView對應的item布局
weixin_item.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="80dp"
    android:layout_marginTop="300dp"
    android:padding="10dp"
    android:orientation="horizontal">
    <ImageView
        android:id="@+id/img1"
        android:layout_width="20dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.5"/>
    <LinearLayout
        android:orientation="vertical"
        android:layout_marginLeft="23dp"
        android:layout_width="8dp"
        android:layout_height="match_parent"
        android:layout_weight="4">
        <TextView
            android:id="@+id/title"
            android:textColor="#000000"
            android:textSize="18dp"
            android:gravity="center_vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="2.5"/>
        <TextView
            android:id="@+id/content"
            android:textColor="#A8A8A8"
            android:gravity="center_vertical"
            android:singleLine="true"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1.5"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:paddingRight="-50dp"
        android:layout_weight="1"
        android:gravity="right"
        android:orientation="vertical">
        <TextView
            android:id="@+id/time"
            android:textColor="#A8A8A8"
            android:textSize="15dp"
            android:layout_gravity="right"
            android:layout_marginRight="1dp"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="0.5"/>
        <ImageView
            android:id="@+id/code"
            android:background="@color/white"
            android:layout_gravity="right"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="0.5"/>
    </LinearLayout>
</LinearLayout>

修改微信訊息界面fragment.java代碼

package com.example.wxchatdemo;

import android.annotation.SuppressLint;
import android.app.Fragment;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.support.annotation.Nullable;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ListView;

import com.example.wxchatdemo.adapter.ImageAdapter;

import org.json.JSONObject;

import java.io.BufferedReader;
import java.io.BufferedWriter;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.io.OutputStream;
import java.io.OutputStreamWriter;
import java.net.HttpURLConnection;
import java.net.URL;
import java.net.URLEncoder;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@SuppressLint("ValidFragment")
public class WeixinFragment extends Fragment {
    //微信號，用于查找微信訊息串列
    private String number;
    // 宣告組件
    private ListView listView;
    // 創建集合用于存盤服務器發來的顯示微信訊息串列的一些資訊
    private List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();
    //自定義的一個Hander訊息機制
    private MyHander myhander = new MyHander();
    /*有參構造方法，引數為微信號*/
    @SuppressLint("ValidFragment")
    WeixinFragment(String number) {
        this.number = number;
    }
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        // 開一個執行緒完成網路請求操作
        Thread thread1 = new Thread(new Runnable() {
            @Override
            public void run() {
                httpUrlConnPost(String.valueOf(number));
            }
        });
        thread1.start();
        /*等待網路請求執行緒完成*/
        try {
            thread1.join();
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        //獲取fragment布局
        View view = inflater.inflate(R.layout.weixin_fragment, container, false);
        //初始化組件
        listView = view.findViewById(R.id.listView);
        //創建自定義的配接器，用于把資料顯示在組件上
        BaseAdapter adapter = new ImageAdapter(getActivity().getApplicationContext(), list);
        //設定適配器
        listView.setAdapter(adapter);
        return view;
    }

    // 1.撰寫一個發送請求的方法
    // 發送請求的主要方法
    public void httpUrlConnPost(String number) {
        HttpURLConnection urlConnection = null;
        URL url;
        try {
            // 請求的URL地地址
            url = new URL(
                    "http://100.2.178.10:8080/AndroidServer_war_exploded/WeixinInformation");
            urlConnection = (HttpURLConnection) url.openConnection();// 打開http連接
            urlConnection.setConnectTimeout(3000);// 連接的超時時間
            urlConnection.setUseCaches(false);// 不使用快取
            // urlConnection.setFollowRedirects(false);是static函式，作用于所有的URLConnection物件，
            urlConnection.setInstanceFollowRedirects(true);// 是成員函式，僅作用于當前函式,設定這個連接是否可以被重定向
            urlConnection.setReadTimeout(3000);// 回應的超時時間
            urlConnection.setDoInput(true);// 設定這個連接是否可以寫入資料
            urlConnection.setDoOutput(true);// 設定這個連接是否可以輸出資料
            urlConnection.setRequestMethod("POST");// 設定請求的方式
            urlConnection.setRequestProperty("Content-Type",
                    "application/json;charset=UTF-8");// 設定訊息的型別
            urlConnection.connect();// 連接，從上述至此的配置必須要在connect之前完成，實際上它只是建立了一個與服務器的TCP連接
            JSONObject json = new JSONObject();// 創建json物件
            //json.put("title", URLEncoder.encode(title, "UTF-8"));// 使用URLEncoder.encode對特殊和不可見字符進行編碼
            json.put("number", URLEncoder.encode(number, "UTF-8"));// 把資料put進json物件中
            String jsonstr = json.toString();// 把JSON物件按JSON的編碼格式轉換為字串
            // ------------字符流寫入資料------------
            OutputStream out = urlConnection.getOutputStream();// 輸出流，用來發送請求，http請求實際上直到這個函式里面才正式發送出去
            BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(out));// 創建字符流物件并用高效緩沖流包裝它，便獲得最高的效率,發送的是字串推薦用字符流，其它資料就用位元組流
            bw.write(jsonstr);// 把json字串寫入緩沖區中
            bw.flush();// 重繪緩沖區，把資料發送出去，這步很重要
            out.close();
            bw.close();// 使用完關閉
            Log.i("aa", urlConnection.getResponseCode() + "");
            //以下判斷是否訪問成功，如果回傳的狀態碼是200則說明訪問成功
            if (urlConnection.getResponseCode() == HttpURLConnection.HTTP_OK) {// 得到服務端的回傳碼是否連接成功
                // ------------字符流讀取服務端回傳的資料------------
                InputStream in = urlConnection.getInputStream();
                BufferedReader br = new BufferedReader(
                        new InputStreamReader(in));
                String str = null;
                StringBuffer buffer = new StringBuffer();
                while ((str = br.readLine()) != null) {// BufferedReader特有功能，一次讀取一行資料
                    System.out.println("測驗：" + str);
                    buffer.append(str);
                }
                in.close();
                br.close();
                JSONObject rjson = new JSONObject(buffer.toString());
                String str1 = rjson.getJSONObject("json").get("titleimg").toString();
                String[] pic = str1.split("\r\n");
                String str2 = rjson.getJSONObject("json").get("title").toString();
                String[] title = str2.split("\r\n");
                String str3 = rjson.getJSONObject("json").get("content").toString();
                String[] content = str3.split("\r\n");
                String str4 = rjson.getJSONObject("json").get("time").toString();
                String[] time = str4.split("\r\n");
                String str5 = rjson.getJSONObject("json").get("showcode").toString();
                String[] pic2 = str5.split("\r\n");
                for (int i = 0; i < pic.length; i++) {
                    Map<String, Object> map = new HashMap<String, Object>();
                    map.put("pic", pic[i]);
                    System.out.println("網址:" + pic[i]);
                    map.put("title", title[i]);
                    System.out.println("網址:" + title[i]);
                    map.put("content", content[i]);
                    map.put("time", time[i]);
                    map.put("code", pic2[i]);
                    list.add(map);//將map放到list集合中
                }
                boolean result = rjson.getBoolean("json");// 從rjson物件中得到key值為"json"的資料，這里服務端回傳的是一個boolean型別的資料
                System.out.println("json:===" + result);
                //如果服務器端回傳的是true，則說明跳轉微信頁成功，跳轉微信頁失敗
                if (result) {// 判斷結果是否正確
                    //在Android中http請求，必須放到執行緒中去作請求，但是在執行緒中不可以直接修改UI，只能通過hander機制來完成對UI的操作
                    myhander.sendEmptyMessage(1);
                    Log.i("用戶：", "跳轉微信頁成功");
                } else {
                    myhander.sendEmptyMessage(2);
                    System.out.println("222222222222222");
                    Log.i("用戶：", "跳轉微信頁失敗");
                }
            } else {
                myhander.sendEmptyMessage(2);
            }
        } catch (Exception e) {
            e.printStackTrace();

            Log.i("aa", e.toString());
            System.out.println("11111111111111111");
            myhander.sendEmptyMessage(2);
        } finally {
            urlConnection.disconnect();// 使用完關閉TCP連接，釋放資源
        }
    }

    // 在Android中不可以在執行緒中直接修改UI，只能借助Handler機制來完成對UI的操作
    class MyHander extends Handler {
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            //判斷hander的內容是什么，如果是1則說明跳轉微信頁成功，如果是2說明跳轉微信頁失敗
            switch (msg.what) {
                case 1:
                    Log.i("aa", msg.what + "");
                    break;
                case 2:
                    Log.i("aa", msg.what + "");
            }

        }
    }
}

上述代碼具體的內容就不闡述了，代碼都有注釋，主要說一下上面給ListView設定配接器，它是自定義的配接器，通過繼承系統自帶配接器BaseAdapter，重寫相應方法，把資料顯示在LlistView對應的item布局相應組件上，至于為什么要自定義，因為微信訊息頁每一個串列都有至少兩個圖片資料，而要把圖片加載到組件上需要用到工具類（后面會給出）

上面fragment.java代碼自定義了一個配接器，現在就來創建它，創建之前，可以先創建包單獨存放配接器，方便管理；
在這里插入圖片描述

在這里插入圖片描述

ImageAdapter.java

package com.example.wxchatdemo.adapter;


import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import com.example.wxchatdemo.tools.GetImageByUrl;
import com.example.wxchatdemo.R;

import java.util.List;
import java.util.Map;

public class ImageAdapter extends BaseAdapter {
    // 要顯示的資料的集合
    private List<Map<String, Object>> data;
    // 接受背景關系
    private Context context;
    // 宣告內部類物件
    private ViewHolder viewHolder;

    public ImageAdapter(Context context, List<Map<String, Object>> data) {
        this.context = context;
        this.data = data;
    }

    // 回傳的總個數
    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return data.size();
    }

    // 回傳每個條目對應的資料
    @Override
    public Object getItem(int position) {
        // TODO Auto-generated method stub
        return data.get(position);
    }

    // 回傳的id
    @Override
    public long getItemId(int position) {
        // TODO Auto-generated method stub
        return position;
    }

    // 回傳這個條目對應的控制元件物件
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        // 判斷當前條目是否為null
        if (convertView == null) {
            viewHolder = new ViewHolder();
            convertView = View.inflate(context, R.layout.weixin_item, null);
            viewHolder.img1 = (ImageView) convertView
                    .findViewById(R.id.img1);
            viewHolder.title = (TextView) convertView
                    .findViewById(R.id.title);
            viewHolder.content = (TextView) convertView
                    .findViewById(R.id.content);
            viewHolder.time = (TextView) convertView
                    .findViewById(R.id.time);
            viewHolder.code = (ImageView) convertView
                    .findViewById(R.id.code);
            convertView.setTag(viewHolder);
        } else {
            viewHolder = (ViewHolder) convertView.getTag();
        }
        // 獲取List集合中的map物件
        Map<String, Object> map = data.get(position);
        // 獲取圖片的url路徑
        String pic = map.get("pic").toString();
        // 這里呼叫了圖片加載工具類的setImage方法將圖片直接顯示到控制元件上
        GetImageByUrl getImageByUrl = new GetImageByUrl();
        getImageByUrl.setImage(viewHolder.img1, pic);
        String title = map.get("title").toString();
        viewHolder.title.setText(title);
        String content = map.get("content").toString();
        viewHolder.content.setText(content);
        String time = map.get("time").toString();
        viewHolder.time.setText(time);
        // 獲取圖片的url路徑
        String code = map.get("code").toString();
        // 這里呼叫了圖片加載工具類的setImage方法將圖片直接顯示到控制元件上
        GetImageByUrl getImageByUrl2 = new GetImageByUrl();
        getImageByUrl2.setImage(viewHolder.code, code);

        return convertView;
    }

    /**
     * 內部類 記錄單個條目中所有屬性
     *
     *
     *
     */
    class ViewHolder {
        public ImageView img1;
        public TextView title;
        public TextView content;
        public TextView time;
        public ImageView code;
    }
}

上面用到圖片加載工具類，后面會給出

在工具包tools中創建圖片加載工具類GetImageByUrl.java

GetImageByUrl.java

package com.example.wxchatdemo.tools;

import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Handler;
import android.os.Message;
import android.widget.ImageView;

import java.io.InputStream;
import java.net.HttpURLConnection;
import java.net.URL;

/**
 * 根據圖片url路徑獲取圖片
 *
 *
 *
 */
public class GetImageByUrl {

    private PicHandler pic_hdl;
    private ImageView imgView;
    private String url;
    
    /**
     * 通過圖片url路徑獲取圖片并顯示到對應控制元件上
     *
     *
     *
     */
    public void setImage(ImageView imgView, String url) {
        this.url = url;
        this.imgView = imgView;
        pic_hdl = new PicHandler();
        Thread t = new LoadPicThread();
        t.start();
    }
    
    class LoadPicThread extends Thread {
        @Override
        public void run() {
            Bitmap img = getUrlImage(url);
            System.out.println(img + "---");
            Message msg = pic_hdl.obtainMessage();
            msg.what = 0;
            msg.obj = img;
            pic_hdl.sendMessage(msg);
        }
    }

    class PicHandler extends Handler {

        @Override
        public void handleMessage(Message msg) {
            Bitmap myimg = (Bitmap) msg.obj;
            imgView.setImageBitmap(myimg);
        }

    }

    public Bitmap getUrlImage(String url) {
        Bitmap img = null;
        try {
            URL picurl = new URL(url);
            HttpURLConnection conn = (HttpURLConnection) picurl
                    .openConnection();
            conn.setConnectTimeout(6000);
            conn.setDoInput(true);
            conn.setUseCaches(false);
            conn.connect();
            InputStream is = conn.getInputStream();
            img = BitmapFactory.decodeStream(is);
            is.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
        return img;
    }
}

到此微信訊息頁移動端就完成了，由于服務端功能還沒實作，所以測驗時微信訊息頁顯示的是空白的，因為ListView對應Item布局默認是沒有資料的，資料是從服務器獲取的，下一篇會完善服務端功能

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/287945.html

標籤：java

上一篇：cgb2104-day13

下一篇：靠！我被專案經理和同事嘲笑了，因為不會遠程debug除錯...

android 仿微信demo————微信訊息界面實作（移動端）

移動端微信訊息頁實作