天天看點

使用OkHttp+popupwindow顯示底部狀态欄實作上傳圖檔功能

今天閑的沒事就在上傳圖檔的地方寫了一個底部彈出菜單欄,雖然很簡單,但是為了以後友善用,索性還是寫下來了,那好,我們先看一下實作效果吧,我想這種效果現在用的實在是太多了(點選按鈕顯示底部菜單欄,然後單擊空白地方隐藏菜單欄(記住隻需要單擊空白地方就可以,很友善,使用者體驗也比較好))

使用OkHttp+popupwindow顯示底部狀态欄實作上傳圖檔功能
1:網絡權限
<uses-permission android:name="android.permission.INTERNET"></uses-permission>
2:我封裝了一個OKHttp,需要在build.gradle 中加入
compile 'com.squareup.okhttp3:logging-interceptor:3.4.2'  在同步一在
3:用SharedPreferences 儲存和擷取圖檔了,将圖檔和字元串進行了轉換
4: 可以調用相機和相冊擷取圖檔,并進行剪切      
------------------------------------下面就開始代碼,先是布局的代碼-------------------------------      
先是activity_main      
<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:gravity="center"
    tools:context="bwie.com.okhttpdesign.MainActivity">
    <ImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:scaleType="fitXY"
        android:src="@mipmap/ic_launcher"
        android:id="@+id/iv_img"/>

</LinearLayout>
           
接下來是bottom_dialog      
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:background="#ffffff"
    android:orientation="vertical"
    android:paddingBottom="20dp"
    android:paddingLeft="22.5dp"
    android:paddingRight="22.5dp"
    android:paddingTop="20dp">

    <Button
        android:id="@+id/bt_camera"
        android:layout_width="match_parent"
        android:layout_height="42dp"
        android:gravity="center"
        android:text="拍照"
        android:textSize="18sp"
        />

    <Button
        android:id="@+id/bt_xiangce"
        android:layout_width="match_parent"
        android:layout_height="42dp"
        android:layout_marginTop="16dp"
        android:gravity="center"
        android:text="從相冊中選取"
        android:textSize="18sp" />

</LinearLayout>
           
下面就是代碼MainActivity代碼      
import android.app.Dialog;
import android.content.Context;
import android.content.Intent;
import android.content.SharedPreferences;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.net.Uri;
import android.os.Bundle;
import android.os.Environment;
import android.provider.MediaStore;
import android.support.v7.app.AppCompatActivity;
import android.util.Base64;
import android.util.Log;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.Toast;

import java.io.ByteArrayInputStream;
import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

import okhttp3.Request;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{
    private ImageView iv_img;
    private static final int PHOTO_REQUEST_CAREMA = 1;// 拍照
    private static final int PHOTO_REQUEST_GALLERY = 2;// 從相冊中選擇
    private static final int PHOTO_REQUEST_CUT = 3;// 結果
    /* 頭像名稱 */
    private static final String PHOTO_FILE_NAME = "temp_photo.jpg";
    private File tempFile;
    private Dialog mCameraDialog;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }
    private void initView() {
        iv_img = (ImageView) findViewById(R.id.iv_img);
        iv_img.setOnClickListener(this);
//從SharedPreferences擷取圖檔
        getBitmapFromSharedPreferences();
    }
    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.iv_img:
                //彈出對話框
                setDialog();
                break;
            case R.id.bt_camera:
                Toast.makeText(this,"正在打開相機",Toast.LENGTH_SHORT).show();
                // 激活相機
                Intent intent = new Intent("android.media.action.IMAGE_CAPTURE");
                // 判斷存儲卡是否可以用,可用進行存儲
                if (hasSdcard()) {
                    tempFile = new File(Environment.getExternalStorageDirectory(), PHOTO_FILE_NAME);
                    // 從檔案中建立uri
                    Uri uri = Uri.fromFile(tempFile);
                    intent.putExtra(MediaStore.EXTRA_OUTPUT, uri);
                }
                // 開啟一個帶有傳回值的Activity,請求碼為PHOTO_REQUEST_CAREMA
                startActivityForResult(intent, PHOTO_REQUEST_CAREMA);
                mCameraDialog.dismiss();
                break;
            case R.id.bt_xiangce:
                // 激活系統圖庫,選擇一張圖檔
                Toast.makeText(this,"正在打開圖庫",Toast.LENGTH_SHORT).show();
                Intent intent1 = new Intent(Intent.ACTION_PICK);
                intent1.setType("image/*");
                // 開啟一個帶有傳回值的Activity,請求碼為PHOTO_REQUEST_GALLERY
                startActivityForResult(intent1, PHOTO_REQUEST_GALLERY);
                mCameraDialog.dismiss();
                break;
        }

    }
    //這裡就是顯示底部狀态欄
    private void setDialog() {
        mCameraDialog = new Dialog(this, R.style.BottomDialog);
        LinearLayout root = (LinearLayout) LayoutInflater.from(this).inflate(
                R.layout.bottom_dialog, null);
        //初始化視圖

        root.findViewById(R.id.bt_xiangce).setOnClickListener(this);
        root.findViewById(R.id.bt_camera).setOnClickListener(this);
        mCameraDialog.setContentView(root);
        Window dialogWindow = mCameraDialog.getWindow();
        dialogWindow.setGravity(Gravity.BOTTOM);
//        dialogWindow.setWindowAnimations(R.style.dialogstyle); // 添加動畫
        WindowManager.LayoutParams lp = dialogWindow.getAttributes(); // 擷取對話框目前的參數值
        lp.x = 0; // 新位置X坐标
        lp.y = 0; // 新位置Y坐标
        lp.width = (int) getResources().getDisplayMetrics().widthPixels; // 寬度
        root.measure(0, 0);
        lp.height = root.getMeasuredHeight();

        lp.alpha = 9f; // 透明度
        dialogWindow.setAttributes(lp);
        mCameraDialog.show();
    }
    /*
* 判斷sdcard是否被挂載
*/
    private boolean hasSdcard() {
        //判斷SD卡手否是安裝好的   media_mounted
        if (Environment.getExternalStorageState().equals(Environment.MEDIA_MOUNTED)) {
            return true;
        } else {
            return false;
        }
    }

    /*
     * 剪切圖檔
     */
    private void crop(Uri uri) {
        // 裁剪圖檔意圖
        Intent intent = new Intent("com.android.camera.action.CROP");
        intent.setDataAndType(uri, "image/*");
        intent.putExtra("crop", "true");
        // 裁剪框的比例,1:1
        intent.putExtra("aspectX", 1);
        intent.putExtra("aspectY", 1);
        // 裁剪後輸出圖檔的尺寸大小
        intent.putExtra("outputX", 250);
        intent.putExtra("outputY", 250);

        intent.putExtra("outputFormat", "JPEG");// 圖檔格式
        intent.putExtra("noFaceDetection", true);// 取消人臉識别
        intent.putExtra("return-data", true);
        // 開啟一個帶有傳回值的Activity,請求碼為PHOTO_REQUEST_CUT
        startActivityForResult(intent, PHOTO_REQUEST_CUT);
    }

    /**
     *
     * @param requestCode
     * @param resultCode
     * @param data
     */
    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        if (requestCode == PHOTO_REQUEST_GALLERY) {
            // 從相冊傳回的資料
            if (data != null) {
                // 得到圖檔的全路徑
                Uri uri = data.getData();
                crop(uri);
            }
        } else if (requestCode == PHOTO_REQUEST_CAREMA) {
            // 從相機傳回的資料
            if (hasSdcard()) {
                crop(Uri.fromFile(tempFile));
            } else {
                Toast.makeText(MainActivity.this, "未找到存儲卡,無法存儲照片!", Toast.LENGTH_SHORT).show();
            }
        } else if (requestCode == PHOTO_REQUEST_CUT) {
            // 從剪切圖檔傳回的資料
            if (data != null) {
                Bitmap bitmap = data.getParcelableExtra("data");
                /**
                 * 獲得圖檔
                 */
                iv_img.setImageBitmap(bitmap);
                //儲存到SharedPreferences
                saveBitmapToSharedPreferences(bitmap);
            }
            try {
                // 将臨時檔案删除
                tempFile.delete();
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
        super.onActivityResult(requestCode, resultCode, data);
    }

    //儲存圖檔到SharedPreferences
    private void saveBitmapToSharedPreferences(Bitmap bitmap) {
        // Bitmap bitmap=BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher);
        //第一步:将Bitmap壓縮至位元組數組輸出流ByteArrayOutputStream
        ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
        bitmap.compress(Bitmap.CompressFormat.PNG, 80, byteArrayOutputStream);
        //第二步:利用Base64将位元組數組輸出流中的資料轉換成字元串String
        byte[] byteArray = byteArrayOutputStream.toByteArray();
        String imageString = new String(Base64.encodeToString(byteArray, Base64.DEFAULT));
        //第三步:将String保持至SharedPreferences
        SharedPreferences sharedPreferences = getSharedPreferences("testSP", Context.MODE_PRIVATE);
        SharedPreferences.Editor editor = sharedPreferences.edit();
        editor.putString("image", imageString);
        editor.commit();

        //上傳頭像
        setImgByStr(imageString,"");
    }

    /**
     * 上傳頭像       此處使用用的OKHttp post請求上傳的圖檔
     * @param imgStr
     * @param imgName
     */
    public  void setImgByStr(String imgStr, String imgName) {
        String url = "https://..........";
        Map<String, String> params = new HashMap<String, String>();
        params.put("id", "參數值");//
        params.put("data", imgStr);
        OkHttp.postAsync(url, params, new OkHttp.DataCallBack() {
            @Override
            public void requestFailure(Request request, IOException e) {
                Log.i("上傳失敗", "失敗" + request.toString() + e.toString());
            }
            @Override
            public void requestSuccess(String result) throws Exception {
                Log.i("上傳成功", result);
            }
        });
    }

    //從SharedPreferences擷取圖檔
    private void getBitmapFromSharedPreferences(){
        SharedPreferences sharedPreferences=getSharedPreferences("testSP", Context.MODE_PRIVATE);
        //第一步:取出字元串形式的Bitmap
        String imageString=sharedPreferences.getString("image", "");
        //第二步:利用Base64将字元串轉換為ByteArrayInputStream
        byte[] byteArray=Base64.decode(imageString, Base64.DEFAULT);
        if(byteArray.length==0){
            iv_img.setImageResource(R.mipmap.ic_launcher);
        }else{
            ByteArrayInputStream byteArrayInputStream=new ByteArrayInputStream(byteArray);

            //第三步:利用ByteArrayInputStream生成Bitmap
            Bitmap bitmap= BitmapFactory.decodeStream(byteArrayInputStream);
            iv_img.setImageBitmap(bitmap);
        }

    }

}
           
下面就是OkHttp封裝類      
import android.os.Handler;
import android.os.Looper;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.util.HashMap;
import java.util.Map;
import java.util.concurrent.TimeUnit;

import okhttp3.Call;
import okhttp3.Callback;
import okhttp3.FormBody;
import okhttp3.OkHttpClient;
import okhttp3.Request;
import okhttp3.RequestBody;
import okhttp3.Response;
import okhttp3.logging.HttpLoggingInterceptor;

/**
 * Created by BAIPEI on 2017/12/8.
 */

public class OkHttp {
    /**
     * 靜态執行個體
     */
    private static OkHttp sOkHttpManager;

    /**
     * okhttpclient執行個體
     */
    private OkHttpClient mClient;

    /**
     * 因為我們請求資料一般都是子線程中請求,在這裡我們使用了handler
     */
    private Handler mHandler;

    /**
     * 構造方法
     */
    private OkHttp() {
//        // 可以通過實作 Logger 接口更改日志儲存位置
        HttpLoggingInterceptor loggingInterceptor = new HttpLoggingInterceptor();
        loggingInterceptor.setLevel(HttpLoggingInterceptor.Level.BODY);

//        mClient = new OkHttpClient.Builder().addInterceptor(loggingInterceptor).build();
        mClient = new OkHttpClient();
        /**
         * 在這裡直接設定連接配接逾時.讀取逾時,寫入逾時
         */

        OkHttpClient.Builder builder = mClient.newBuilder();
        builder.connectTimeout(10, TimeUnit.SECONDS);
        builder.readTimeout(10, TimeUnit.SECONDS);
        builder.writeTimeout(10, TimeUnit.SECONDS);
        builder.addInterceptor(loggingInterceptor);
        mClient = builder.build();

        /**
         * 如果是用的3.0之前的版本  使用以下直接設定連接配接逾時.讀取逾時,寫入逾時
         */

        //client.setConnectTimeout(10, TimeUnit.SECONDS);
        //client.setWriteTimeout(10, TimeUnit.SECONDS);
        //client.setReadTimeout(30, TimeUnit.SECONDS);


        /**
         * 初始化handler
         */
        mHandler = new Handler(Looper.getMainLooper());
    }



    /**
     * 單例模式  擷取OkHttp執行個體
     *
     * @return
     */
    public static OkHttp getInstance() {

        if (sOkHttpManager == null) {
            sOkHttpManager = new OkHttp();
        }
        return sOkHttpManager;
    }

    //-------------------------同步的方式請求資料--------------------------

    /**
     * 對外提供的get方法,同步的方式
     *
     * @param url 傳入的位址
     * @return
     */
    public static Response getSync(String url) {

        //通過擷取到的執行個體來調用内部方法
        return sOkHttpManager.inner_getSync(url);
    }

    /**
     * GET方式請求的内部邏輯處理方式,同步的方式
     *
     * @param url
     * @return
     */
    private Response inner_getSync(String url) {
        Request request = new Request.Builder().url(url).build();
        Response response = null;
        try {
            //同步請求傳回的是response對象
            response = mClient.newCall(request).execute();
        } catch (IOException e) {
            e.printStackTrace();
        }
        return response;
    }

    /**
     * 對外提供的同步擷取String的方法
     *
     * @param url
     * @return
     */
    public static String getSyncString(String url) {
        return sOkHttpManager.inner_getSyncString(url);
    }


    /**
     * 同步方法
     */
    private String inner_getSyncString(String url) {
        String result = null;
        try {
            /**
             * 把取得到的結果轉為字元串,這裡最好用string()
             */
            result = inner_getSync(url).body().string();
        } catch (IOException e) {
            e.printStackTrace();
        }
        return result;
    }

    //-------------------------異步的方式請求資料--------------------------
    public static void getAsync(String url, DataCallBack callBack) {
        getInstance().inner_getAsync(url, callBack);
    }

    /**
     * 内部邏輯請求的方法
     *
     * @param url
     * @param callBack
     * @return
     */
    private void inner_getAsync(String url, final DataCallBack callBack) {
        final Request request = new Request.Builder().url(url).build();

        mClient.newCall(request).enqueue(new Callback() {
            @Override
            public void onFailure(Call call, IOException e) {
                deliverDataFailure(request, e, callBack);
            }

            @Override
            public void onResponse(Call call, Response response) throws IOException {
                String result = null;
                try {
                    result = response.body().string();
                } catch (IOException e) {
                    deliverDataFailure(request, e, callBack);
                }
                deliverDataSuccess(result, callBack);
            }
        });
    }


    /**
     * 分發失敗的時候調用
     *
     * @param request
     * @param e
     * @param callBack
     */
    private void deliverDataFailure(final Request request, final IOException e, final DataCallBack callBack) {
        /**
         * 在這裡使用異步處理
         */
        mHandler.post(new Runnable() {
            @Override
            public void run() {
                if (callBack != null) {
                    callBack.requestFailure(request, e);
                }
            }
        });
    }

    /**
     * 分發成功的時候調用
     *
     * @param result
     * @param callBack
     */
    private void deliverDataSuccess(final String result, final DataCallBack callBack) {
        /**
         * 在這裡使用異步線程處理
         */
        mHandler.post(new Runnable() {
            @Override
            public void run() {
                if (callBack != null) {
                    try {
                        callBack.requestSuccess(result);
                    } catch (Exception e) {
                        e.printStackTrace();
                    }
                }
            }
        });
    }

    /**
     * 資料回調接口
     */
    public interface DataCallBack {
        void requestFailure(Request request, IOException e);

        void requestSuccess(String result) throws Exception;
    }

    //-------------------------送出表單--------------------------

    public static void postAsync(String url, Map<String, String> params, DataCallBack callBack) {
        getInstance().inner_postAsync(url, params, callBack);
    }

    private void inner_postAsync(String url, Map<String, String> params, final DataCallBack callBack) {

        RequestBody requestBody = null;
        if (params == null) {
            params = new HashMap<>();
        }

        /**
         * 如果是3.0之前版本的,建構表單資料是下面的一句
         */
        //FormEncodingBuilder builder = new FormEncodingBuilder();

        /**
         * 3.0之後版本
         */
        FormBody.Builder builder = new FormBody.Builder();

        /**
         * 在這對添加的參數進行周遊,map周遊有四種方式,如果想要了解的可以網上查找
         */
        for (Map.Entry<String, String> map : params.entrySet()) {
            String key = map.getKey().toString();
            String value = null;
            /**
             * 判斷值是否是空的
             */
            if (map.getValue() == null) {
                value = "";
            } else {
                value = map.getValue();
            }
            /**
             * 把key和value添加到formbody中
             */
            builder.add(key, value);
        }
        requestBody = builder.build();
        //結果傳回
        // 請求對象
        final Request request = new Request.Builder().url(url).post(requestBody).build();
        mClient.newCall(request).enqueue(new Callback() {
            @Override
            public void onFailure(Call call, IOException e) {
                deliverDataFailure(request, e, callBack);
            }

            @Override
            public void onResponse(Call call, Response response) throws IOException {
                String result = response.body().string();
                deliverDataSuccess(result, callBack);
            }


        });
    }


    //-------------------------檔案下載下傳--------------------------
    public static void downloadAsync(String url, String desDir, DataCallBack callBack) {
        getInstance().inner_downloadAsync(url, desDir, callBack);
    }

    /**
     * 下載下傳檔案的内部邏輯處理類
     *
     * @param url      下載下傳位址
     * @param desDir   目标位址
     * @param callBack
     */
    private void inner_downloadAsync(final String url, final String desDir, final DataCallBack callBack) {
        final Request request = new Request.Builder().url(url).build();
        mClient.newCall(request).enqueue(new Callback() {
            @Override
            public void onFailure(Call call, IOException e) {
                deliverDataFailure(request, e, callBack);
            }

            @Override
            public void onResponse(Call call, Response response) throws IOException {

                /**
                 * 在這裡進行檔案的下載下傳處理
                 */
                InputStream inputStream = null;
                FileOutputStream fileOutputStream = null;
                try {
                    //檔案名和目标位址
                    File file = new File(desDir, getFileName(url));
                    //把請求回來的response對象裝換為位元組流
                    inputStream = response.body().byteStream();
                    fileOutputStream = new FileOutputStream(file);
                    int len = 0;
                    byte[] bytes = new byte[2048];
                    //循環讀取資料
                    while ((len = inputStream.read(bytes)) != -1) {
                        fileOutputStream.write(bytes, 0, len);
                    }
                    //關閉檔案輸出流
                    fileOutputStream.flush();
                    //調用分發資料成功的方法
                    deliverDataSuccess(file.getAbsolutePath(), callBack);
                } catch (IOException e) {
                    //如果失敗,調用此方法
                    deliverDataFailure(request, e, callBack);
                    e.printStackTrace();
                } finally {
                    if (inputStream != null) {
                        inputStream.close();
                    }
                    if (fileOutputStream != null) {
                        fileOutputStream.close();
                    }

                }
            }

        });
    }

    /**
     * 根據檔案url擷取檔案的路徑名字
     *
     * @param url
     * @return
     */
    private String getFileName(String url) {
        int separatorIndex = url.lastIndexOf("/");
        String path = (separatorIndex < 0) ? url : url.substring(separatorIndex + 1, url.length());
        return path;
    }



}
           
因為要做一個底部狀态欄,而且還要讓它顯示,隐藏 我就在res檔案夾下建立了一個anim的動畫包裡面有兩個檔案      
一個是顯示時調用的,一個是隐藏時調用的      
顯示時actionsheet_dialog_in      
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="200"
        android:fromYDelta="100%"
        android:toYDelta="0" />
</set>
           
隐藏時actionsheet_dialog_out      
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="200"
        android:fromYDelta="0"
        android:toYDelta="100%" />
</set>
           
下面還要再styles裡設定
<style name="BottomDialog" parent="@android:style/Theme.Dialog">

        <!-- 背景透明 -->
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="android:windowContentOverlay">@null</item>
        <!-- 浮于Activity之上 -->
        <item name="android:windowIsFloating">true</item>
        <!-- 邊框 -->
        <item name="android:windowFrame">@null</item>
        <!-- Dialog以外的區域模糊效果 -->
        <item name="android:backgroundDimEnabled">true</item>
        <!-- 無标題 -->
        <item name="android:windowNoTitle">true</item>
        <!-- 半透明 -->
        <item name="android:windowIsTranslucent">true</item>
        <!-- Dialog進入及退出動畫 -->
        <item name="android:windowAnimationStyle">@style/DialogAnimation</item>
    </style>
    <!-- ActionSheet進出動畫 -->
    <style name="DialogAnimation" parent="@android:style/Animation.Dialog">
        <item name="android:windowEnterAnimation">@anim/actionsheet_dialog_in</item>
        <item name="android:windowExitAnimation">@anim/actionsheet_dialog_out</item>
    </style>
           
這樣就可以做出一個簡單點選圖檔底下彈出個狀态欄實作上傳圖檔功能了
注釋有點少是以看得時候有點麻煩,如有什麼問題請多多留言
        
使用OkHttp+popupwindow顯示底部狀态欄實作上傳圖檔功能
使用OkHttp+popupwindow顯示底部狀态欄實作上傳圖檔功能
使用OkHttp+popupwindow顯示底部狀态欄實作上傳圖檔功能
在上傳圖檔位址後有個</span><span style="color:#4b4b4b;">       
這句話直接删了就行,也不知道怎麼就自己出來的      

繼續閱讀