课程设计——模仿网易云UI设计基础（超简单版）

本来想把我自己做的东西放出来给你们的，但是解释起来有点难，
所以就先弄出一个简单版本，也就是可以过关的版本。

先上我的版本，如果要弄这种的可以私聊我好吧-0-。

简单版，好像花了3个小时吧。上图。

直接上代码了，我写了很多注释，你们可以看， 交上去的时候把注释删掉就好。由于我用的是android Studio ，不是eclipse，可能会在导包上出现一点问题。到时候再问好了。

ps：studio上 亲测可运行，有问题再call 我 -0- 。然后，复制所有的代码，不出问题是可以用的。。

代码层次

逻辑部分

这部分用这个线包起来的地方可以修改
// ———————————————————————————————————–>

MainActivity

package com.example.pc.simpleui;

import android.content.Intent;
import android.support.annotation.NonNull;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.GridView;

import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;

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

public class MainActivity extends AppCompatActivity {
    //把布局文件中的控件声明出来，记得ViewPager导入的是V4包下的ViewPager
    private ViewPager viewPager ;
    private GridView gridView ;
    private ListView listView ;
    //声明数组对象，存放我们要显示的内容
    private List<ImageView> pagerImages ;
//    ----------------------------------------------------------------------------------------------------------->
//   这个内部的中文字，可以自己修改，这个是gridView显示的字体，也就是页面中8个小机器人下面的字。
    private String gridStrings [] = new String[]{"微专业", "互联网", "设计创作", "职场/金融", "兴趣生活", "语言/留学", "中小学", "考试认证"};
//   这个内部的中文字，可以自己修改，这个是listView显示的字体，也就是页面下拉下去显示的字。
    private String listStrings [] = new String[]{"第1个列表", "第2个列表", "第3个列表", "第4个列表", "第5个列表", "第6个列表", "第7个列表", "第8个列表"};
//    ----------------------------------------------------------------------------------------------------------->

    //声明inflater
    private LayoutInflater mInflater ;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //一些初始化操作
        pagerImages = new ArrayList<ImageView>();
        pagerImages = setPagerImages();
        mInflater = LayoutInflater.from(this);

        initView();//新建一个方法初始化View，能够让代码更佳好看

        initEvent();

    }

    private List<ImageView> setPagerImages() {

        List<ImageView> list = new ArrayList<ImageView>();
// ----------------------------------------------------------------------------------------------------------->
        /**
         *  里面的0xFF+ 数字，数字是显示的显色，可以修改掉。
         *  也可以通过删除image1.setBackgroundColor(0xFF333333);改成注释的那句话，然后设置你自己的图片。
         */

        ImageView image1 = new ImageView(this);
        image1.setBackgroundColor(0xFF333333);
//        image1.setImageResource(R.mipmap.ic_launcher);
        list.add(image1);
        ImageView image2 = new ImageView(this);
        image2.setBackgroundColor(0xFFffffff);
        list.add(image2);
        ImageView image3 = new ImageView(this);
        image3.setBackgroundColor(0xFF555555);
        list.add(image3);
        ImageView image4 = new ImageView(this);
        image4.setBackgroundColor(0xFF999999);
        list.add(image4);
// ----------------------------------------------------------------------------------------------------------->
        return list;
    }

    private void initView() {
        // 通过findVIewById 的方式初始化控件，关联布局文件。
        viewPager = (ViewPager) findViewById(R.id.viewPager);
        gridView = (GridView) findViewById(R.id.gridView);
        listView = (ListView) findViewById(R.id.listView);

        //这3个控件都是比较复杂的，需要设置adapter，为了简单起见，期间的图我都使用系统提供的android小机器人。

        //首先是ViewPager
        viewPager.setAdapter(new PagerAdapter() {
            //pagerAdapter 我们要至少重写它的四个方法。
            @Override
            //这个方法设置的是页数，我们设置为 4.
            public int getCount() {
                return pagerImages.size();
            }

            //这个方法来判断两张图片是不是同一张，我们用官方提供的方法
            @Override
            public boolean isViewFromObject(View view, Object object) {
            //这里我们返回 view == object ，这是官方提供的。
                return view == object;
            }
            //上面两个方法时 new PagerAdapter 的时候系统提供给你的，但这不够，我们需要再引入两个方法。

            // PagerApdater 默认值提供3个页面的缓存，如果滑动超出了缓存的范围，就会删除远离当前位置的页面。
            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {
                    container.removeView(pagerImages.get(position));
            }

            //下面这个方法时关键的方法。和destroy对应，它是产生3个缓存的方法。
            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                container.addView(pagerImages.get(position));
                return pagerImages.get(position);
            }
        });

        //接着是GridView ,GridView 需要自定义一个它自身的项目的layout文件，我们在外部定义一下，取名item_gridview。
        gridView.setAdapter(new ArrayAdapter<String>(this,-1,gridStrings){
            @NonNull
            @Override
            public View getView(int position, View convertView, ViewGroup parent) {
                ViewHolder viewHolder = new ViewHolder();
                //这几部都是利用ViewHolder的机制的复用，因为findVIewById是很消耗时间的操作，先进行判空，如果不为空则不再新建，
                // 也就是不再findVIewById，从而节省资源。
                if (convertView == null){
                    convertView = mInflater.inflate(R.layout.item_gridview,parent,false);
                    viewHolder.textView = (TextView) convertView.findViewById(R.id.textView_Grid);
                    viewHolder.imageView = (ImageView) convertView.findViewById(R.id.imageView_Grid);
                    //这一个步算是关键，需要的话百度搜下很容易明白，课设无所谓啦。
                    convertView.setTag(viewHolder);
                }
                viewHolder = (ViewHolder) convertView.getTag();
//    ----------------------------------------------------------------------------------------------------------->
//              里面的R.mipmap.ic_launcher 可以修改成你自己的图片。
                viewHolder.imageView.setImageResource(R.mipmap.ic_launcher);
//    ----------------------------------------------------------------------------------------------------------->
                viewHolder.textView.setText(gridStrings[position]);
                return convertView;
            }
        });

        //最后就是ListView,我们也还是要给listView自身项目新建一个layout文件，取名item_listveiw。
        // 很容易发现，他们是很相似的。ListView是一个很经典的控件。
        listView.setAdapter(new ArrayAdapter<String>(this,-1,listStrings){
            @NonNull
            @Override
            public View getView(int position, View convertView, ViewGroup parent) {
                ViewHolder viewHolder = new ViewHolder();
                if (convertView == null){
                    convertView = mInflater.inflate(R.layout.item_listview,parent,false);
                    viewHolder.textView = (TextView) convertView.findViewById(R.id.textView_List);
                    convertView.setTag(viewHolder);
                }
                viewHolder = (ViewHolder) convertView.getTag();
                viewHolder.textView.setText(listStrings[position]);
                return convertView;
            }
        });
//        到这里，基本的显示就完成了。
    }

    private void initEvent() {
        /**
         *  注意：加分项，设置一些点击事件，跳转页面什么的。一样按顺序来。为了方便阅读，我就都设置成匿名内部类的方式。
         */
        //ViewPager 点击事件弄起来稍麻烦，就不弄了。

        gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
                /**
                 *  这里我们弄个弹出另一个Activity的点击事件吧。
                 *  首先去新建一个 Activity ，起名 otherActivity 。不懂问下我吧-0-。
                 *  So，现在先把看向 OtherActivity的代码。
                 */
                Intent intent = new Intent(MainActivity.this,OtherActivity.class);
                startActivity(intent);
                //就两行代码，超简单。
            }
        });

        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
                //弹出一个提示的点击事件。
                Toast.makeText(MainActivity.this,"这里写你自己的文字就好。",Toast.LENGTH_SHORT).show();
            }
        });

    }


    //新建内部类，主要是利用几个控件的复用效果，然而其实并没有什么卵用，这个案例没有办法利用到复用。只是给你们看看
    class ViewHolder {
        ImageView imageView;
        TextView textView;
    }
}

OtherActivity

package com.example.pc.simpleui;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class OtherActivity extends AppCompatActivity {
    //这个Activity中只定义了一个Button，用来销毁这个Activity。先实现这个逻辑。
    private Button button ;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_other);

        button = (Button) findViewById(R.id.button_Other);//初始化。
        button.setOnClickListener(new View.OnClickListener() {
            //设置点击事件。
            @Override
            public void onClick(View view) {
                finish();//销毁当前Activity。
            }
        });
        //销毁这个Activity逻辑完成。回到MainActivity。
    }

}

布局文件

这部分文件，数字和中文的地方都可以修改，还有backGround的颜色可以修改。原始的我为了区分弄得比较丑。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.pc.simpleui.MainActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="我是头部标题栏"
        android:textSize="24dp" />

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

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

            <android.support.v4.view.ViewPager
                android:id="@+id/viewPager"
                android:layout_width="match_parent"
                android:layout_height="200dp" />

            <GridView
                android:id="@+id/gridView"
                android:layout_width="match_parent"
                android:layout_height="180dp"
                android:background="@color/colorPrimary"
                android:gravity="center"
                android:numColumns="4"
                android:paddingTop="20dp" />

            <ListView
                android:id="@+id/listView"
                android:layout_width="match_parent"
                android:layout_height="500dp" />
        </LinearLayout>

    </ScrollView>
</LinearLayout>

activity_other.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_other"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.pc.simpleui.OtherActivity">

    <Button
        android:id="@+id/button_Other"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="DestroyMe" />
</RelativeLayout>

item_gridview.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">

    <ImageView
        android:id="@+id/imageView_Grid"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/textView_Grid"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

item_listview.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:orientation="vertical">

    <TextView
        android:background="#A9FFD8"
        android:gravity="center"
        android:id="@+id/textView_List"
        android:layout_width="match_parent"
        android:layout_height="80dp" />
</LinearLayout>