课程设计——模仿网易云UI设计基础（超简单版）
来源：互联网 发布：vb用什么软件编写 编辑：程序博客网 时间：2024/05/18 22:55
本来想把我自己做的东西放出来给你们的，但是解释起来有点难，
所以就先弄出一个简单版本，也就是可以过关的版本。
先上我的版本，如果要弄这种的可以私聊我好吧-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> 0 0
- 课程设计——模仿网易云UI设计基础（超简单版）
- Android 模仿网易新闻简单标题栏 《零基础学安卓》
- 微信小程序实战教程：模仿—网易云音乐(一）
- 微信小程序实战教程：模仿—网易云音乐（二）
- 模仿网易新闻客户端（RSS版）
- 简单模仿易信UI
- 简单模仿易信UI
- 简单模仿易信UI
- Qt模仿网易云音乐
- 《易读》一个模仿网易云音乐UI，Rxjava+Retrofit+dagger2+MVP的开源项目
- 模仿网易云课堂的底部导航栏切换—RadioButton+Fragment
- 模仿网易新闻客户端（RSS版）（一）
- 模仿网易新闻客户端（RSS版）（二）
- 模仿网易新闻客户端（RSS版）（一）
- 模仿网易新闻客户端（RSS版）（二）
- 模仿网易新闻客户端（RSS版）（一）
- 模仿网易新闻客户端（RSS版）（一）
- 模仿网易新闻客户端（RSS版）（二）
- oracle的完整性约束
- 【soapUI】解决post请求时，body为json串，服务器无法解析问题
- Backbone入门指南（七）：Router和History (路由控制器)
- Centos生产环境编译安装LNMP
- 简单的jquery ajax文件上传功能
- 课程设计——模仿网易云UI设计基础（超简单版）
- 冰法斗神龙 （贪心）
- .NETCore使用Dapper操作MySQL
- VC＋＋编程时经常会遇到链接错误LNK2001
- 错误org.springframework.dao.EmptyResultDataAccessException: Incorrect result size: expected 1,actual 0
- HDU - 1027 Ignatius and the Princess II
- Android之——史上最简单图片轮播广告效果实现
- C#实现MD5加密
- MySQL中的ROWNUM的实现
