移动开发实例-布局练习

移动开发实例-布局练习

当先的项目所在地址C:\Users\cxl\Desktop\food\k2

1.GridView栈格布局

1.1效果图

1.2代码

1.目录

图 目录

2.grade配置

// Top-level build file where you can add configuration options common to all sub-projects/modules.buildscript {    repositories {        maven{ url 'http://maven.aliyun.com/nexus/content/groups/public/'}    }    dependencies {        classpath 'com.android.tools.build:gradle:2.2.0'        // NOTE: Do not place your application dependencies here; they belong        // in the individual module build.gradle files    }}allprojects {    repositories {        maven{ url 'http://maven.aliyun.com/nexus/content/groups/public/'}    }}task clean(type: Delete) {    delete rootProject.buildDir}

3.全局的grade配置

dependencies {    compile fileTree(dir: 'libs', include: ['*.jar'])    compile 'com.android.support:appcompat-v7:+'}

4.设置主布局文件

Android GridView详解 - 简书参考

• numColumns设置的是要创建的列的数量

<?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_food2"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    tools:context="com.example.cxl.food2.Food2"><!--显示要显示的标题信息-->    <TextView        android:id="@+id/titleText"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:text="美食荟萃"        android:gravity="center"        android:textSize="30dp"        android:textColor="#b99d70"        />    <!--https://www.jianshu.com/p/cbdf08841ed4-->    <!--栈格布局-->    <!--            android:numColumns="2" 设置的是列数    -->    <GridView        android:id="@+id/gridView1"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:numColumns="2"        >    </GridView></LinearLayout>

图 设置主布局文件

5.设置

• 列表项的布局文件

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"    android:layout_width="match_parent"    android:layout_height="match_parent">    <!--设置要显示的图片的信息    图片    描述信息    -->    <ImageView        android:id="@+id/ms_imd"        android:layout_width="150dp"        android:layout_height="100dp"        android:layout_gravity="center"        android:src="@drawable/ms1"        />    <TextView        android:id="@+id/ms_desc"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center"        android:text="美食"        /></LinearLayout>

图 列表项的布局文件

6.java代码

采用的设置的方式SimpleAdapter的方法

• 需要设置数据
• 设置事件监听

public class Food2 extends AppCompatActivity {private GridView gridView;//    定义所有的静态文件的信息（所有的美食图片信息）    private int [] icons={        R.drawable.ms1,R.drawable.ms2,R.drawable.ms3,        R.drawable.ms4,R.drawable.ms5,R.drawable.ms6,        R.drawable.ms7,R.drawable.ms8,R.drawable.ms9,        R.drawable.ms10,R.drawable.ms11,R.drawable.ms12    };//    所有美食的描述信息    private String[] iconname={            "美食1","美食2","美食3",            "美食4","美食5","美食6",            "美食7","美食8","美食9",            "美食10","美食11","美食12"};    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_food2);//        设置要显示的布局的信息        gridView=findViewById(R.id.gridView1);//      设置数据SimpleAdapter        SimpleAdapter adapter=new SimpleAdapter(this,                getData(),                R.layout.meishi_item,                new String[]{"img","desc"},                new int[]{R.id.ms_imd,R.id.ms_desc});//        绑定        gridView.setAdapter(adapter);//        设置事件监听        gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {            @Override            public void onItemClick(AdapterView<?> adapterView, View view, int position, long id) {                String result=adapterView.getItemAtPosition(position).toString();//                输入要显示的信息                Toast.makeText(Food2.this,result,Toast.LENGTH_SHORT).show();            }        });    }    private List<Map<String,Object>> getData(){        List<Map<String,Object>> list=new ArrayList<>();        for (int i=0;i<12;i++){            Map<String,Object> map=new HashMap<>();            map.put("img",icons[i]);            map.put("desc",iconname[i]);            list.add(map);        }return  list;    }}

2.ListView布局

出错的地方就是grade详见1.2中的grade配置，设置仓库和依赖的地址就可以

2.1效果图

2.2代码

1.目录

2.全局布局文件设置

• 采用的是ListView的布局方式

<?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_person"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    tools:context="com.example.cxl.person.Person"><!--电话簿-->    <TextView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="电话簿"        android:textSize="30dp"        android:gravity="center"        />    <!--显示电话簿列表-->    <ListView        android:id="@+id/personListView"        android:layout_width="match_parent"        android:layout_height="wrap_content"        >    </ListView></LinearLayout>

3.子列表的布局

• 线性布局：横向- textView- 表格布局- 第一列- 第二列

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="horizontal"    android:layout_width="match_parent"    android:layout_height="match_parent">    <!--显示左侧的图片-->    <ImageView        android:layout_width="50dp"        android:layout_height="50dp"        android:src="@drawable/person"        android:padding="5dp"        android:id="@+id/img1"        />    <!--采用表格的形式显示信息-->    <TableLayout        android:layout_width="wrap_content"        android:layout_height="wrap_content">        <!--第一行-->        <TableRow>            <!--第一列-->            <TextView                android:id="@+id/txtName"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="张艳"                android:paddingTop="5dp"                android:paddingRight="10dp"                />            <!--第二列-->            <TextView                android:id="@+id/txtCity"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="济南"                />        </TableRow>        <!--第二行-->        <TableRow>            <!--第1列-->            <TextView                android:id="@+id/txtPhone"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="13512345678"                />            <!--第2列-->            <TextView                android:id="@+id/txtaddr"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="山东省"                />        </TableRow>    </TableLayout></LinearLayout>

4.Java代码

• SimpleAdapter设置数据- 需要绑定- 设置事件监听，点击的时候出现数据

public class Person extends AppCompatActivity {    ListView listview;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_person);//        获取listview中的信息        listview=(ListView)findViewById(R.id.personListView);//        设置列表信息        /*        * 上下文        * 数据        * 样式        * map名称        * 映射的名称        * */        SimpleAdapter adapter=new SimpleAdapter(this,getDate(),R.layout.listview_person_item,                new String[]{"img","name","City","Phone","Addr"},                new int[]{R.id.img1,R.id.txtName,R.id.txtCity,R.id.txtPhone,R.id.txtaddr});//      设置适配器关联        listview.setAdapter(adapter);//      设置事件监听        listview.setOnItemClickListener(new AdapterView.OnItemClickListener() {            @Override            public void onItemClick(AdapterView<?> adapterView, View view, int position, long id) {//                显示的是全部的信息                String result=adapterView.getItemAtPosition(position).toString();                Toast.makeText(Person.this,result,Toast.LENGTH_SHORT).show();                System.out.println(result);//                显示的是局部的信息                TextView text=view.findViewById(R.id.txtName);                System.out.println(text.getText());            }        });    }    //要设置在适配器中的数据    List<Map<String,Object>> getDate(){        List<Map<String,Object>> list=new ArrayList<>();        //造假数据        Map<String,Object> map=new HashMap<String,Object>();        map.put("img",R.drawable.person);        map.put("name","张艳");        map.put("City","长沙");        map.put("Phone","13312345678");        map.put("Addr","中国");        list.add(map);        map=new HashMap<String,Object>();        map.put("img",R.drawable.person);        map.put("name","李力");        map.put("City","重庆");        map.put("Phone","18512345678");        map.put("Addr","中国");        list.add(map);        map=new HashMap<String,Object>();        map.put("img",R.drawable.person);        map.put("name","王丹");        map.put("City","武汉");        map.put("Phone","13012345678");        map.put("Addr","中国");        list.add(map);        map=new HashMap<String,Object>();        map.put("img",R.drawable.person);        map.put("name","刘明");        map.put("City","上海");        map.put("Phone","13812345678");        map.put("Addr","中国");        list.add(map);        return list;    }}