您的位置:首页 > Web前端 > JavaScript

淘忆项目之分享界面客户端的修正归纳

2016-08-25 22:50 232 查看
淘忆项目之分享界面客户端的修正归纳
客户端就是通过用户输入数据,然后向服务器端传递。
第一步:编写界面布局文件:这个布局后期应该还会有所改动,现在先这样。
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#f8f8f8"
    android:orientation="vertical"
    tools:context="com.elainetaylor.blog.ui.fragment.ShareFragment"
    >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#fff">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="12dp"
            android:gravity="center"
            android:text="分享"
            android:textSize="20sp"
/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="4dp"
        android:background="#fff"
        android:orientation="vertical"
        android:padding="3dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <ImageButton
                android:id="@+id/ib_addPic"
                android:layout_width="90dp"
                android:layout_height="90dp"
                android:background="@android:color/transparent"
                android:src="@mipmap/icon_add"
                android:scaleType="fitXY"/>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:orientation="vertical">

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:gravity="center"
                    android:orientation="horizontal">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="名称"
                        android:textColor="#707070"
                        android:textSize="15sp"
/>

                    <EditText
                        android:id="@+id/et_thingName"
                        android:layout_width="200dp"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="10dp"
                        android:layout_marginStart="10dp"
                        android:background="@drawable/et_bg_share"
                        android:inputType="text"
                        android:paddingLeft="3dp"
                        android:paddingStart="3dp"
                        android:lines="1"
                        android:textSize="14sp"/>
                </LinearLayout>

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginTop="10dp"
                    android:gravity="center"
                    android:orientation="horizontal">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:text="标签"
                        android:textColor="#707070"
                        android:textSize="15sp"
/>

                    <EditText
                        android:lines="1"
                        android:textSize="14sp"
                        android:paddingLeft="3dp"
                        android:paddingStart="3dp"
                        android:id="@+id/et_thingTip"
                        android:layout_width="200dp"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:layout_marginLeft="10dp"
                        android:layout_marginStart="10dp"
                        android:background="@drawable/et_bg_share"
                        android:inputType="text"
/>
                </LinearLayout>

            </LinearLayout>

        </LinearLayout>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:text="详细描述"
            android:textColor="#707070"
            android:textSize="15sp"
/>

        <EditText
            android:textSize="14sp"
            android:id="@+id/et_thingContent"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:background="@drawable/et_bg_share"
            android:inputType="textMultiLine"
            android:lines="8"
            android:singleLine="false"
            android:gravity="start"
            android:padding="3dp"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="12dp"
            android:text="提示"
            android:textColor="#707070"
            android:textSize="14sp"
/>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:orientation="horizontal">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="#80年代"
                android:textColor="#707070"
                android:textSize="13sp"
/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="#90年代"
                android:textColor="#707070"
                android:textSize="13sp"
/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="#70年代"
                android:textColor="#707070"
                android:textSize="13sp"
/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="#60年代"
                android:textColor="#707070"
                android:textSize="13sp"
/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:orientation="horizontal">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="#相机"
                android:textColor="#707070"
                android:textSize="13sp"
/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="#文艺小青年"
                android:textColor="#707070"
                android:textSize="13sp"
/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="#孩童时期玩具"
                android:textColor="#707070"
                android:textSize="13sp"
/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:orientation="horizontal">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="#明星周边"
                android:textColor="#707070"
                android:textSize="13sp"
/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="#珍贵书籍"
                android:textColor="#707070"
                android:textSize="13sp"
/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="#明清时期"
                android:textColor="#707070"
                android:textSize="13sp"
/>
        </LinearLayout>

        <Button
            android:id="@+id/btn_share"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_gravity="center"
            android:layout_marginTop="35dp"
            android:background="@drawable/btn_bg_share"
            android:gravity="center"
            android:text="分享"
            android:textColor="#fff"
            android:textSize="15sp"
/>
    </LinearLayout>
</LinearLayout>
第二步:布局文件中对按钮做了点背景处理:
<?xml version="1.0"
encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <size android:height="100dp"
android:width="100dp"/>
    <solid android:color="#00b7ee"/>
    <corners android:radius="50dp"/>
</shape>
第三步:添加请求地址
public static
String getShareUrl() {
    return
URL +
"/servlet/ThingAction";
}

public static String
getUpdateThingPic() {
    return
URL +
"/servlet/PicUploadServlet";
}
这里我分为两个地址,一个是对图片的上传,另一个是对数据的上传。

第四步,对图片文件的处理,在这里建立一个common文件夹,然后加入UpdatePicUtils,这里说明一下,这是我从网上找来的一个实现方法,具体没怎么研究过,不是自己的东西,但是能用,谢谢那位写这个的大哥的分享,谢谢。

package
com.elainetaylor.blog.common;

import java.io.BufferedReader;
import java.io.DataInputStream;
import java.io.DataOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.InputStreamReader;
import java.io.OutputStream;
import java.net.HttpURLConnection;
import java.net.URL;

public class UpdatePicUtils {

   public static
String formUpload(String urlStr,
String filePath) {
      String rsp = "";
      HttpURLConnection conn =
null;
      String BOUNDARY =
"|";
      try {
         URL url = new
URL(urlStr);
         conn = (HttpURLConnection) url.openConnection();
         conn.setConnectTimeout(5000);
         conn.setReadTimeout(30000);
         conn.setDoOutput(true);
         conn.setDoInput(true);
         conn.setUseCaches(false);
         conn.setRequestMethod("POST");
         conn.setRequestProperty("Connection",
"Keep-Alive");
         conn.setRequestProperty("User-Agent",
               "Mozilla/5.0 (Windows; U; Windows NT 6.1; zh-CN; rv:1.9.2.6)");
         conn.setRequestProperty("Content-Type",
               "multipart/form-data; boundary="
+ BOUNDARY);

         OutputStream out =
new DataOutputStream(conn.getOutputStream());
         File file =
new File(filePath);
         String filename = file.getName();
         String contentType =
"";
         if (filename.endsWith(".png")) {
            contentType = "image/png";
         }
         if
(filename.endsWith(".jpg")) {
            contentType = "image/jpg";
         }
         if
(filename.endsWith(".gif")) {
            contentType = "image/gif";
         }
         if
(filename.endsWith(".bmp")) {
            contentType = "image/bmp";
         }
         if
(contentType == null
|| contentType.equals("")) {
            contentType = "application/octet-stream";
         }
         StringBuffer strBuf =
new StringBuffer();
         strBuf.append("\r\n").append("--").append(BOUNDARY).append("\r\n");
         strBuf.append("Content-Disposition: form-data; name=\""
+ filePath
               + "\"; filename=\""
+ filename + "\"\r\n");
         strBuf.append("Content-Type:"
+ contentType + "\r\n\r\n");
         out.write(strBuf.toString().getBytes());
         DataInputStream in =
new DataInputStream(new
FileInputStream(file));
         int bytes =
0;
         byte[] bufferOut =
new byte[1024];
         while ((bytes = in.read(bufferOut)) != -1) {
            out.write(bufferOut,
0,
bytes);
         }
         in.close();
         byte[] endData = ("\r\n--"
+ BOUNDARY + "--\r\n").getBytes();
         out.write(endData);
         out.flush();
         out.close();

         StringBuffer buffer =
new StringBuffer();
         BufferedReader reader =
new BufferedReader(new
InputStreamReader(conn.getInputStream(),
"utf-8"));
         String line =
null;
         while ((line = reader.readLine()) !=
null) {
            buffer.append(line).append("\n");
         }
         rsp = buffer.toString();
         reader.close();
         reader =
null;
      }
catch (Exception e) {
         e.printStackTrace();
      }
finally {
         if
(conn != null) {
            conn.disconnect();
            conn =
null;
         }
      }
      return
rsp;
   }

}
这是对图片的处理。
第五步:功能处理部分,直接在代码中解释。
package
com.elainetaylor.blog.ui.fragment;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Intent;
import android.database.Cursor;
import android.net.Uri;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.provider.MediaStore;
import android.text.TextUtils;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageButton;
import android.widget.Toast;

import com.android.volley.AuthFailureError;
import com.android.volley.Request;
import com.android.volley.Response;
import com.android.volley.VolleyError;
import com.android.volley.toolbox.StringRequest;
import com.elainetaylor.blog.R;
import com.elainetaylor.blog.common.BaseFragment;
import com.elainetaylor.blog.common.UpdatePicUtils;
import com.elainetaylor.blog.common.UrlUtils;
import com.elainetaylor.blog.ui.activity.LoginActivity;

import org.json.JSONException;
import org.json.JSONObject;

import java.io.File;
import java.text.SimpleDateFormat;
import java.util.HashMap;
import java.util.Map;

public class ShareFragment
extends BaseFragment
implements OnClickListener {
    private
ImageButton ibAddPic;
    private EditText
etThingName,
etThingTip,
etThingContent;
    private Button
btnShare;
    String
result =
"";
    String
filename =
"";

    @SuppressLint("HandlerLeak")//对图片的上传的处理
    Handler handler
= new
Handler() {
        @Override
        public void
handleMessage(Message msg) {
            super.handleMessage(msg);
            switch (msg.what) {
                case
1:
                    missProgressDialog();
                    Toast.makeText(getActivity(),
"图片上传成功",
Toast.LENGTH_SHORT).show();
                    break;
                case 2:
                    missProgressDialog();
                    Toast.makeText(getActivity(),
"图片上传失败",
Toast.LENGTH_SHORT).show();
                    break;
                default:
                    break;
            }
        }
    };

    @Override
    public void
onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public
View onCreateView(LayoutInflater inflater,
ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_share,
container, false);
        ibAddPic
= (ImageButton) view.findViewById(R.id.ib_addPic);
        etThingName
= (EditText) view.findViewById(R.id.et_thingName);
        etThingTip
= (EditText) view.findViewById(R.id.et_thingTip);
        etThingContent
= (EditText) view.findViewById(R.id.et_thingContent);
        btnShare
= (Button) view.findViewById(R.id.btn_share);
        ibAddPic.setOnClickListener(this);
        btnShare.setOnClickListener(this);
        initRequestQueue();
        return view;
    }

    @Override
    public void
onClick(View view) {
        switch
(view.getId()) {
            case
R.id.btn_share://先检查是否已经登陆,未登录不可上传信息
                if
(!readData()) {
                    Intent i =
new Intent(getActivity(),
LoginActivity.class);
                    startActivity(i);
                }
else {
                    sendMes();
                }
                break;
            case R.id.ib_addPic:
                if
(!readData()) {
                    Intent i =
new Intent(getActivity(),
LoginActivity.class);
                    startActivity(i);
                }
else {
                    openGallery();
                }
                break;
        }
    }

    public void
openGallery() { //打开相册找里面的图片
        Intent intent = new
Intent(
                Intent.ACTION_PICK,
                android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
        intent.setDataAndType(MediaStore.Images.Media.EXTERNAL_CONTENT_URI,
                "image/*");
        startActivityForResult(intent,
1);
    }

    public void
sendMes() {//将物品的信息提交给服务器端
        final
String userId = readUserId();
        final String thingName =
etThingName.getText().toString();
        final String thingTip =
etThingTip.getText().toString();
        final String thingContent =
etThingContent.getText().toString();
        final String thingPicName =
filename;
        final String date = getTime();
        if (thingName.isEmpty()) {
            Toast.makeText(getActivity(),
"亲,请输入物件名称",
Toast.LENGTH_SHORT).show();
        }
else if (thingTip.isEmpty()) {
            Toast.makeText(getActivity(),
"亲,请输入物件标签",
Toast.LENGTH_SHORT).show();
        }
else if (thingContent.isEmpty()) {
            Toast.makeText(getActivity(),
"亲,请输入物件详细描述",
Toast.LENGTH_SHORT).show();
        }
else if (thingPicName.isEmpty()) {
            Toast.makeText(getActivity(),
"亲,请选择图片",
Toast.LENGTH_SHORT).show();
        }
else {
            showProgressDialog("发布中...");
            StringRequest request =
new StringRequest(Request.Method.POST,
UrlUtils.getShareUrl(), new
Response.Listener<String>() {
                @Override
                public void
onResponse(String s) {
                    try
{
                        JSONObject object =
new JSONObject(s);
                        String msg = object.getString("msg");
                        missProgressDialog();
                        Toast.makeText(getActivity(),
msg,
Toast.LENGTH_SHORT).show();
                        if (msg.equals("发布成功")) {
                            etThingName.setText("");
                            etThingTip.setText("");
                            etThingContent.setText("");
                            ibAddPic.setImageResource(R.mipmap.icon_add);
                        }
                    } catch
(JSONException e) {
                        e.printStackTrace();
                        missProgressDialog();
                    }
                }
            }, new
Response.ErrorListener() {
                @Override
                public void
onErrorResponse(VolleyError volleyError) {
                    missProgressDialog();
                    Toast.makeText(getActivity(),
"服务器出错",
Toast.LENGTH_SHORT).show();
                }
            }) {
                @Override
                protected
Map<String,
String> getParams()
throws AuthFailureError {
                    Map<String,
String> params = new
HashMap<>();
                    params.put("action_flag",
"addThing");
                    params.put("userId",
userId);
                    params.put("thingName",
thingName);
                    params.put("thingTip",
thingTip);
                    params.put("thingContent",
thingContent);
                    params.put("thingPicName",
thingPicName);
                    params.put("submitTime",
date);
                    return params;
                }
            };
            addRequestQueue(request);
        }
    }

    @Override
    public void
onActivityResult(int
requestCode, int
resultCode,
Intent data) {
        getActivity();
        if (resultCode != Activity.RESULT_OK) {
            return;
        }
        switch
(requestCode) {
            case
1:
                if
(data == null) {
                    return;
                }
                Uri uri = data.getData();
                String[] proj = {MediaStore.Images.Media.DATA};
                Cursor cursor = getActivity().managedQuery(uri,
proj, null, null, null);
                int column_index = cursor
                        .getColumnIndexOrThrow(MediaStore.Images.Media.DATA);
                cursor.moveToFirst();
                final String path = cursor.getString(column_index);
                File file =
new File(path);
                filename
= file.getName(); //获取图片的名字复制给全局变量
                ibAddPic.setImageURI(uri);
                showProgressDialog("图片上传中...");
                new Thread(new
Runnable() {
                    @Override
                    public void
run() {
                        result
= UpdatePicUtils.formUpload(UrlUtils.getUpdateThingPic(),
path);//判断图片是否上传成功
                        if (!TextUtils.isEmpty(result))
{
                            handler.sendEmptyMessage(1);
                        }
else {
                            handler.sendEmptyMessage(2);
                        }
                    }
                }).start();
                break;
            default:
                break;
        }
        super.onActivityResult(requestCode,
resultCode,
data);
    }

    public
String getTime() {//上传的时间为客户端的时间
        SimpleDateFormat sDateFormat =
new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");
        String date = sDateFormat.format(new
java.util.Date());
        return date;
    }
}
以上就是客户端的书写,就是向服务器端传递图片和信息,功能简单,后面慢慢的修复。
 
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  时间 图片上传 json