当前位置:   article > 正文

Android Studio开发学习(五)——ImageView、ListView、GridView、ScrollView、HorizontalScrollView_android studio 找不到horizontalscrollview

android studio 找不到horizontalscrollview

一、前提

今天学习ImageView、ListView、GridView、ScrollView、HorizontalScrollView,也是很常见的控件

二、目标

ImageView(图像视图)

ListView(列表控件)

GridView(表格控件)

ScrollView(竖直滚动条)

HorizontalScrollView(水平滚动条)

三、内容

(一)ImageView

1、常用属性

大致相同

  1. <ImageView
  2. android:id="@+id/imageview1"
  3. android:layout_width="200dp"
  4. android:layout_height="200dp"
  5. android:background="#FF9900"
  6. android:src="@drawable/hmbb"
  7. />

我们注意到src属性是内容属性,可以在里面添加图片,当然background属性,也可以,这里我们为了方便测试

此时我们可以看到图片添加到了这个控件中,但我们发现,图片并没有铺满整个控件,而是还有一部分是背景颜色,此时我们就要使用到一个属性android:scaleType=“”这个属性用来调整图片,缩放类型

原图:     

android:scaleType=“fitXY”拉伸显示图片,不保持原始比例,铺满整个控件大小
android:scaleType=“fitStart”按照比例放大或缩小图片高度,使其显示在控件顶部
android:scaleType=“fitCenter”按照比例放大或缩小图片高度,使其显示在控件中间
android:scaleType=“fitEnd”按照比例放大或缩小图片高度,使其显示在控件底部
android:scaleType=“center”保持原图大小,显示在控件中心,多余的部分被裁掉
android:scaleType=“centerCrop”以原图填满控件为目的,如果原图size大于控件的size,按比例缩小,居中显示在控件中。如果原图size小于控件的size,则按比例拉升原图的宽和高,填充控件居中显示
android:scaleType=“centerInside”以原图正常显示为目的,如果原图大小大于控件的size,按比例缩小,居中显示在控件中。如果原图size小于控件的size,则不做处理居中显示图片
android:scaleType=“matrix”不改变原图的大小,从ImageView的左上角开始绘制,超出部分做剪切处理

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

以至于最后一张图是白色的是因为matrix方式是从左上角开始绘制,我选取的图左上角刚好是白色,以上就是scaleType常见的所有绘制方式。

(二)ListView、GridView

重要问题:适配器

1、什么是适配器

ListView是一个列表控件,GridView是一个表格列表,用来显示数据,但ListView和GridView所展示的数据是有一定格式的,这时我们便要引进一个适配器,来建立数据源和ListView、GridView之间的适配关系,将数据源转换成ListView、GridView可以使用的格式进行显示,降低了程序的耦合性。在对于ListView、GridView来说有很多的适配器,我们就要最通用的适配器来完成——BaseAdapter

2、缓冲机制

ListView、GridView可以展示大量的数据信息,像是我们刷新闻刷空间,一条一条的都可用ListView、GridView实现,但假设ListView、GridView能存储50条信息,但屏幕最多显示5条,当我们向上滑动屏幕时第一条信息就会划出屏幕收回到缓冲池中,紧跟着第六条信息就会从缓冲池中取出放到布局文件中,设置数据进行显示,以此类推,这样,系统永远保持这5条数据,这便是缓冲机制,简单的来说就是,用则取出不用则收回,这样便可极大节约系统资源

3、设计

(1)首先设计布局文件,在activity_main添加一个ListView

  1. <ListView
  2. android:id="@+id/listview"
  3. android:layout_width="match_parent"
  4. android:layout_height="wrap_content"
  5. ></ListView>

(2)新建一个布局文件,在布局文件中绘制每一行的显示样式,只用设计一个就可以

  1. <ImageView
  2. android:id="@+id/iv"
  3. android:layout_width="100dp"
  4. android:layout_height="100dp"
  5. android:scaleType="centerCrop"
  6. android:background="#000000"
  7. />
  8. <LinearLayout
  9. android:layout_width="match_parent"
  10. android:layout_height="match_parent"
  11. android:orientation="vertical"
  12. android:paddingLeft="10dp"
  13. >
  14. <TextView
  15. android:id="@+id/tv1"
  16. android:layout_width="wrap_content"
  17. android:layout_height="wrap_content"
  18. android:text="hello!"
  19. android:textSize="20sp"
  20. android:textColor="#00FFFF"
  21. />
  22. <TextView
  23. android:id="@+id/tv2"
  24. android:layout_width="wrap_content"
  25. android:layout_height="wrap_content"
  26. android:text="My friend"
  27. android:textSize="20sp"
  28. android:textColor="#00FF00"
  29. android:layout_marginTop="10dp"
  30. />
  31. <TextView
  32. android:id="@+id/tv3"
  33. android:layout_width="wrap_content"
  34. android:layout_height="wrap_content"
  35. android:text="this is my blog"
  36. android:textSize="20sp"
  37. android:textColor="#33FF86"
  38. android:layout_marginTop="10dp"
  39. />
  40. </LinearLayout>

(3)创建数据源,Item.java

  1. public class Item {
  2. public int ImageResId;
  3. public String itemView1;
  4. public String itemView2;
  5. public String itemView3;
  6. public Item(int ImageResId, String itemView1, String itemView2,String itemView3) {
  7. this.ImageResId = ImageResId;
  8. this.itemView1 = itemView1;
  9. this.itemView2 = itemView2;
  10. this.itemView3 = itemView3;
  11. }
  12. }

(4)在MainActivity中添加数据内容,与布局一一对应

  1. package com.mingrisoft.listview;
  2. import android.support.v7.app.AppCompatActivity;
  3. import android.os.Bundle;
  4. import android.view.View;
  5. import android.widget.AdapterView;
  6. import android.widget.ListView;
  7. import android.widget.Toast;
  8. import java.util.ArrayList;
  9. import java.util.List;
  10. public class MainActivity extends AppCompatActivity {
  11. private ListView listView;
  12. @Override
  13. protected void onCreate(Bundle savedInstanceState) {
  14. super.onCreate(savedInstanceState);
  15. setContentView(R.layout.activity_main);
  16. List<Item> itemBeanList = new ArrayList<>();//动态数组
  17. for (int i = 0;i < 20; i ++){
  18. itemBeanList.add(new Item(R.mipmap.ic_launcher, "标题" + i,"内容" + i, "内容" + i));//每一行的内容,这里的Item是数据源文件中Item方法
  19. }
  20. listView = (ListView) findViewById(R.id.listview);//通过id找到之前设置的listview
  21. //设置ListView的数据适配器
  22. listView.setAdapter(new MyListAdapter(this,itemBeanList));
  23. }
  24. }

其中有些部分是java方面的知识,比如

List<T>类表示可通过索引访问的对象的强类型列表,提供用于对列表进行搜索、排序和操作的方法

(5)最关键的一步,适配器的编写

  1. package com.mingrisoft.listview;
  2. import android.content.Context;
  3. import android.view.LayoutInflater;
  4. import android.view.View;
  5. import android.view.ViewGroup;
  6. import android.widget.BaseAdapter;
  7. import android.widget.ImageView;
  8. import android.widget.TextView;
  9. import java.util.List;
  10. /**
  11. * Created by Administrator on 2020/4/2/002.
  12. */
  13. public class MyListAdapter extends BaseAdapter {
  14. private List<Item> mList;
  15. private LayoutInflater mlayoutInflater;//布局转载其对象,LayoutInflater是用来找res/layout/下的xml布局文件
  16. //通过构造方法将数据源与数据适配器关联起来,context要使用当前的Adapter的界面对象
  17. MyListAdapter(Context context,List<Item> list){//构造方法
  18. mList=list;
  19. mlayoutInflater=LayoutInflater.from(context);//获得 LayoutInflater 实例
  20. }
  21. @Override
  22. public int getCount() {//列表的长度
  23. return mList.size();
  24. }
  25. @Override
  26. public Object getItem(int position) {
  27. return null;
  28. }
  29. @Override
  30. public long getItemId(int position) {
  31. return 0;
  32. }
  33. static class ViewHolder{//用于缓存控件,两个属性分别对应布局文件的控件
  34. public ImageView imageView;
  35. public TextView textView1,textView2,textView3;
  36. }
  37. @Override
  38. public View getView(int position, View convertView, ViewGroup parent) {//每一行的样式
  39. ViewHolder holder=null;
  40. if(convertView==null){//如果View未被实例化,缓冲池没有对应的缓存
  41. //由于我们只需要将XML转化为View,并不涉及到具体的布局,所以第二个参数通常设置为null
  42. convertView=mlayoutInflater.inflate(R.layout.layout,null);
  43. holder=new ViewHolder();
  44. //对viewHolder的属性进行赋值
  45. holder.imageView= (ImageView) convertView.findViewById(R.id.iv);
  46. holder.textView1= (TextView) convertView.findViewById(R.id.tv1);
  47. holder.textView2= (TextView) convertView.findViewById(R.id.tv2);
  48. holder.textView3= (TextView) convertView.findViewById(R.id.tv3);
  49. //通过setTag将convertView与viewHolder关联
  50. convertView.setTag(holder);//setTag()给View对象一个标签,这个标签就是ViewHolder实例化后对象的一个属性
  51. }else {//如果缓存池中有对应的view缓存,则直接通过getTag取出viewHolder
  52. holder= (ViewHolder) convertView.getTag();
  53. }
  54. Item item=mList.get(position);
  55. //给控件赋值
  56. holder.imageView.setImageResource(item.ImageResId);
  57. holder.textView1.setText(item.itemView1);
  58. holder.textView2.setText(item.itemView2);
  59. holder.textView3.setText(item.itemView3);
  60. return convertView;
  61. }
  62. }

其中LayoutInflater这个类还是非常有用的,它的作用类似于findViewById()。不同点是LayoutInflater是用来找res/layout/下的xml布局文件,并且实例化;而findViewById()是找xml布局文件下的具体widget控件(如Button、TextView等)

结果如图:

以上就是整个过程,当然还需要反复的熟练才可用很好的利用

GridView与ListView的设计几乎一样,这里不再做展示,有不同的在于GridView有几条属性

  1. <GridView
  2. android:id="@+id/gridview"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. android:numColumns="3"
  6. android:horizontalSpacing="10dp"
  7. android:verticalSpacing="10dp"
  8. >

android:numColumns="3" 表示列数

android:horizontalSpacing="10dp" 表示水平方向间距(列间距)

android:verticalSpacing="10dp" 表示垂直方向的间距(行间距)

(三)ScrollView、HorizontalScrollView

滚动条就是当页面东西过多显示不下时创立的控件,分为水平和竖直,记得设置滚动条时要在整个布局条件下,将其余的布局创建在滚动条下面

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main"
  4. android:layout_width="match_parent" android:layout_height="match_parent"
  5. android:paddingBottom="@dimen/activity_vertical_margin"
  6. android:paddingLeft="@dimen/activity_horizontal_margin"
  7. android:paddingRight="@dimen/activity_horizontal_margin"
  8. android:paddingTop="@dimen/activity_vertical_margin"
  9. tools:context="com.mingrisoft.scrollview.MainActivity">
  10. <LinearLayout
  11. android:layout_width="match_parent"
  12. android:layout_height="match_parent"
  13. android:orientation="vertical">
  14. <Button
  15. android:layout_width="match_parent"
  16. android:layout_height="100dp" />
  17. <Button
  18. android:layout_width="match_parent"
  19. android:layout_height="100dp" />
  20. <Button
  21. android:layout_width="match_parent"
  22. android:layout_height="100dp" />
  23. <Button
  24. android:layout_width="match_parent"
  25. android:layout_height="100dp" />
  26. <Button
  27. android:layout_width="match_parent"
  28. android:layout_height="100dp" />
  29. <Button
  30. android:layout_width="match_parent"
  31. android:layout_height="100dp" />
  32. </LinearLayout>
  33. </ScrollView>

效果显示需要启动项目,在这里不做演示。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/酷酷是懒虫/article/detail/862526
推荐阅读
相关标签
  

闽ICP备14008679号