淘忆项目之主页界面客户端的整理归纳

原创 2016年08月30日 21:01:51

淘忆项目之主页界面客户端的整理归纳

主页主要包括两个部分,第一部分是轮播图,第二部分是全部物件的简略展示。

轮播图的实现。

首先是用photoshop设计界面:

 

先在build.gradle中添加

compile 'com.jude:rollviewpager:1.2.9'

然后重新加载一下内容。

第一步:建立一个新的Fragment

首先添加一个类方法,命名为HomeRollShowAdapter,添加资源图片。

package com.elainetaylor.blog.adapter;

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

import com.elainetaylor.blog.R;
import com.jude.rollviewpager.adapter.StaticPagerAdapter;
/**
 * Created by Eaine Taylor on 2016/7/15.
 */
public class HomeRollShowAdapter extends StaticPagerAdapter {
    private int[] imgs={R.mipmap.roll_huaibiao,R.mipmap.roll_qiche,R.mipmap.roll_shuben,R.mipmap.roll_xinagji};
    private Context context;
    public HomeRollShowAdapter(Context context){
        this.context=context;
    }
    @Override
    public View getView(ViewGroup container, int position) {
        ImageView view=new ImageView(container.getContext());
        view.setImageResource(imgs[position]);
        view.setScaleType(ImageView.ScaleType.CENTER_CROP);
        view.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
        return view;
    }

    @Override
    public int getCount() {
        return imgs.length;
    }
}

第二步:首先,准备连接服务器的网址。

public static String getHomeItemURL() {
    return URL + "/servlet/HomeItemAction";
}

第三步:根据图片编写布局文件:

<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:background="#f8f8f8"
    android:orientation="vertical"
    tools:context="com.elainetaylor.blog.ui.fragment.HomeFragment">

    <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>

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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


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

                <com.jude.rollviewpager.RollPagerView
                    android:id="@+id/rp_home"
                    android:layout_width="match_parent"
                    android:layout_height="180dp"
                    android:layout_gravity="center">

                </com.jude.rollviewpager.RollPagerView>

                <View
                    android:layout_width="match_parent"
                    android:layout_height="4dp"
                    android:background="#f8f8f8" />
            </LinearLayout>

            <android.support.v7.widget.RecyclerView
                android:id="@+id/rv_home"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

            </android.support.v7.widget.RecyclerView>
        </LinearLayout>

    </ScrollView>

</LinearLayout>

第四步:编写item_home.xml文件的内容,作为recyclerView的每一个条目

<?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="wrap_content"
    android:background="#fff"
    android:orientation="vertical">
    <View
        android:layout_width="match_parent"
        android:layout_height="8dp"
        android:background="#f8f8f8"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/niv_Head"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_marginLeft="10dp"
            android:layout_marginStart="10dp"
            android:background="@drawable/ib_user_head"
            android:scaleType="fitXY" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginLeft="10dp"
            android:layout_marginStart="10dp"
            android:orientation="vertical">

            <TextView
                android:clickable="true"
                android:id="@+id/tv_Name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="start"
                android:layout_marginBottom="5dp"
                android:layout_marginTop="3dp"
                android:text="ElaineTaylor"
                android:textColor="#707070"
                android:textSize="13sp" />

            <TextView
                android:id="@+id/tv_Time"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="2016年07月11日"
                android:textColor="#4000"
                android:textSize="12sp" />
        </LinearLayout>

    </LinearLayout>

    <ImageView
        android:id="@+id/niv_ContentPic"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:layout_marginTop="10dp"
        android:scaleType="fitXY" />

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:padding="3dp">

        <LinearLayout
            android:id="@+id/linearLayout2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="end"
            android:orientation="horizontal">

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

            <TextView
                android:id="@+id/tv_SaveNum"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="0"
                android:layout_marginRight="2dp"
                android:layout_marginEnd="2dp"/>

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

            <TextView
                android:id="@+id/tv_MesNum"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="0"
                android:layout_marginRight="2dp"
                android:layout_marginEnd="2dp"/>
        </LinearLayout>

    </FrameLayout>

</LinearLayout>

第五步:然后是编写HomeItemAdapter的内容。

package com.elainetaylor.blog.adapter;

import android.content.Context;
import android.content.Intent;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import com.elainetaylor.blog.R;
import com.elainetaylor.blog.listener.OnItemClickListener;
import com.elainetaylor.blog.ui.activity.HimActivity;
import com.nostra13.universalimageloader.core.ImageLoader;

import java.util.List;

/**
 * Created by Eaine Taylor on 2016/8/11.
 */
public class HomeItemAdapter extends RecyclerView.Adapter<HomeItemAdapter.HomeItemViewHolder> {

    private List<String> username;
    private List<String> submitTime;
    private List<String> headPic;
    private List<String> contentPic;
    private List<Integer> thingSaveNum;
    private List<Integer> thingMesNum;
    private Context context;
    private OnItemClickListener listener;


    public HomeItemAdapter(List<String> username, List<String> submitTime, List<String> headPic, List<String> contentPic, List<Integer> thingSaveNum, List<Integer> thingMesNum, Context context) {
        this.username = username;
        this.submitTime = submitTime;
        this.headPic = headPic;
        this.contentPic = contentPic;
        this.thingSaveNum = thingSaveNum;
        this.thingMesNum = thingMesNum;
        this.context = context;
    }

    public void setOnItemClickListener(OnItemClickListener listener) {
        this.listener = listener;
    }

    @Override
    public HomeItemViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_home, parent, false);
        HomeItemViewHolder holder = new HomeItemViewHolder(view, listener);
        return holder;
    }

    @Override
    public void onBindViewHolder(HomeItemViewHolder holder, int position) {
        holder.tvUsername.setText(username.get(position));
        holder.tvSubmitTime.setText(submitTime.get(position));
        holder.tvSaveNum.setText(thingSaveNum.get(position).toString());
        holder.tvMesNum.setText(thingMesNum.get(position).toString());
        ImageLoader loader=ImageLoader.getInstance();
        loader.displayImage(contentPic.get(position),holder.nivContentPic);
        loader.displayImage(headPic.get(position),holder.nivHeadPic);

    }

    @Override
    public int getItemCount() {
        return username.size();
    }

    class HomeItemViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
        public TextView tvUsername, tvSubmitTime,tvSaveNum,tvMesNum;
        public ImageView nivHeadPic, nivContentPic;
        public OnItemClickListener listener;

        public HomeItemViewHolder(View itemView, OnItemClickListener listener) {
            super(itemView);
            tvUsername = (TextView) itemView.findViewById(R.id.tv_Name);
            tvSubmitTime = (TextView) itemView.findViewById(R.id.tv_Time);
            tvSaveNum= (TextView) itemView.findViewById(R.id.tv_SaveNum);
            tvMesNum= (TextView) itemView.findViewById(R.id.tv_MesNum);
            nivHeadPic = (ImageView) itemView.findViewById(R.id.niv_Head);
            nivContentPic = (ImageView) itemView.findViewById(R.id.niv_ContentPic);
            this.listener = listener;
            itemView.setOnClickListener(this);
            nivHeadPic.setOnClickListener(this);
            nivContentPic.setOnClickListener(this);
        }

        @Override
        public void onClick(View view) {
            switch (view.getId()){
                case R.id.niv_Head://当用户点击头像的时候跳转到用户信息的界面
                    Intent intent=new Intent(context, HimActivity.class);
                    context.startActivity(intent);
                    break;
                case R.id.niv_ContentPic://当用户点击图片的时候跳转到详情页
                    if (listener != null) {
                        listener.OnclickItemClick(view, getPosition());
                    }
                    break;
            }

        }
    }
}

第六步:对HomeFragment的编写,这里的Fragment继承自BaseFragmentBaseFragment的内容和BaseActivity的内容差不多。

package com.elainetaylor.blog.ui.fragment;

import android.content.Intent;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Toast;

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.adapter.HomeItemAdapter;
import com.elainetaylor.blog.adapter.HomeRollShowAdapter;
import com.elainetaylor.blog.common.BaseFragment;
import com.elainetaylor.blog.common.UrlUtils;
import com.elainetaylor.blog.listener.OnItemClickListener;
import com.elainetaylor.blog.ui.activity.DetailActivity;
import com.jude.rollviewpager.RollPagerView;
import com.jude.rollviewpager.hintview.ColorPointHintView;

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

import java.util.ArrayList;
import java.util.List;


public class HomeFragment extends BaseFragment implements OnItemClickListener {
    private RollPagerView rpHome;
    private RecyclerView rvHome;
    private List<String> nameList;
    private List<String> timeList;
    private List<Integer> saveNumList;
    private List<Integer> mesNumList;
    private List<String> headUrlList;
    private List<String> contentUrlList;
    private List<String> thingIdList;
    private HomeItemAdapter adapter;


    @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_home, container, false);
        rpHome = (RollPagerView) view.findViewById(R.id.rp_home);
        rvHome = (RecyclerView) view.findViewById(R.id.rv_home);
        initRequestQueue();
        initRollPagerView();
        initData();
        getData();
        return view;
    }

    public void initRollPagerView() {
        rpHome.setPlayDelay(2000);
        rpHome.setAnimationDurtion(500);
        rpHome.setAdapter(new HomeRollShowAdapter(getActivity()));
        rpHome.setHintView(new ColorPointHintView(getActivity(), Color.BLACK, Color.WHITE));
    }

    public void initData() {
        nameList = new ArrayList<String>();
        timeList = new ArrayList<String>();
        headUrlList = new ArrayList<String>();
        contentUrlList = new ArrayList<String>();
        mesNumList = new ArrayList<Integer>();
        saveNumList = new ArrayList<Integer>();
        thingIdList = new ArrayList<>();
    }


    public void getData() {
        StringRequest request = new StringRequest(Request.Method.POST, UrlUtils.getHomeItemURL(), new Response.Listener<String>() {
            @Override
            public void onResponse(String s) {
                try {
                    JSONObject object1 = new JSONObject(s);
                    JSONArray array = object1.getJSONArray("thing");
                    for (int i = array.length() - 1; i >= 0; i--) {
                        JSONObject object = array.getJSONObject(i);
                        contentUrlList.add(UrlUtils.getPicUrl() + object.getString("thingPic"));
                        timeList.add(object.getString("submitTime"));
                        mesNumList.add(object.getInt("thingMesNum"));
                        saveNumList.add(object.getInt("thingGoodNum"));
                        thingIdList.add(object.getString("thingId"));
                        nameList.add(object.getString("username"));
                        headUrlList.add(UrlUtils.getPicUrl() + object.getString("userHead"));
                    }
                    LinearLayoutManager manager = new LinearLayoutManager(getActivity());
                    rvHome.setLayoutManager(manager);
                    adapter = new HomeItemAdapter(nameList, timeList, headUrlList, contentUrlList, saveNumList, mesNumList, getActivity());
                    rvHome.setAdapter(adapter);
                    adapter.setOnItemClickListener(HomeFragment.this);
                } catch (JSONException e) {
                    e.printStackTrace();
                }
            }
        }, new Response.ErrorListener() {
            @Override
            public void onErrorResponse(VolleyError volleyError) {
                Toast.makeText(getActivity(), "服务器出错", Toast.LENGTH_SHORT).show();
            }
        });
        addRequestQueue(request);
    }
//将thingId传递给详情页
    @Override
    public void OnclickItemClick(View view, int positon) {
        Intent intent = new Intent(getActivity(), DetailActivity.class);
        intent.putExtra("thingId", thingIdList.get(positon));
        startActivity(intent);
    }
}

 

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

淘忆项目之主页界面服务器端的修正归纳

淘忆项目之主页界面服务器端的修正归纳 服务器端需要传递给客户端信息,传给的数据有用户的头像和名字,物件的图片,发布时间,收藏的数量,留言的数量。 采用mvc 模式书写服务器端的代码。 第一步...

淘忆项目之分享界面服务器端的修正归纳

淘忆项目之分享界面服务器端的修正归纳 分享界面: 主要实现数据的上传,就是将需要分享的物品的相关信息的提交,包括图片,名称,标签,详细叙述。图片提交到update的目录下,文字内容和图片的名字提交...

[源代码]WIN32 SDK界面研究<1>:模仿Windows命令行或telnet客户端的窗口

前言: MFC丰富的控件对于一般程序员来说可以快速构建自己的程序,把开发的重心放在应用的功能实现上。但是程序界面问题一直是MFC程序的软肋,相信用过MFC的人相信都没有少受MFC自绘界面的痛苦。自从...

产品经理如何看待用户界面体验设计,如何做好手机客户端的用户体验标准

http://www.25xt.com/allcode/2583.html 下文主要是略晓网的产品运营经理来分享他对待用户界面体验设计以及如何评价用户体验好坏的一些自己实践中摸索得出...

模仿今日头条客户端的界面及简单功能实现

模仿今日头条界面前不久边学习边试着模仿了一下今日头条的界面,完善了一些功能,最近整理了一下,放在在gitHub上了,地址gitHub传送门。 目前客户端主要完成了界面间的交互,首页和视频两个界面的主...

商业级项目——基金客户端的架构设计与开发(下)(附源码)

#项目简介 上一次的博文中详细分析了基金项目的整体架构和主界面的UI设计。今天分享地方是剩下的3个页面及相应功能的实现。 #个人中心 个人中心界面,最开始会跳转到一个登陆界面,用户可以通过选择“...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)