高考了,祝愿各位学子功成归来~!!!
话说,我家小岁岁也要中考了,在此,祝愿岁岁中考成功~
基本控件使用
Android为我们提供了很多UI样式,但是在实际开发中,我们往往会根据UI图去为我们选择的绝大部分的控件进行渲染,从而达到产品更加的美观。
那么,我们使用的系统提供的UI,绝大部分是由View以及ViewGroup构成,而我们的每一个界面UI也是通过不同的组合实现。大概的图如下:
而今天,我们通过实践开始好好撸一波,继续回味回味~
首先,而今,Android布局再也不是曾经的五大布局了,又添加了一项名为ConstraintLayout(约束布局),这个放到后期我们进行具体使用。
那么,针对原有的五大布局中的表格布局,我们今天首先以此为开篇~
本文重点脑图呈现
由于微信公众号篇幅有限,在此特别挑出几个控件来讲述一番,有兴趣的小伙伴可点击原文查看~
一、Button系列
Button按钮,项目中几乎不可缺少的一个东东,今天好好扒光玩玩~
官方搜索Button,如下:
而下面,则依据上图进行依旧了解~ 当然,So easy的,就一概而过咯~
先来观赏一波层级:
Button从TextView身上派生出几个属性,主要用于设置阴影效果以及阴影位置,下面简单玩玩~
下面附上部分代码:
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:padding="15dp"
android:shadowColor="#666"
android:shadowDx="10"
android:shadowDy="10"
android:shadowRadius="15"
android:text="贺大大"
android:textSize="15sp" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:shadowColor="#ff00"
android:shadowDx="10"
android:shadowDy="10"
android:shadowRadius="15"
android:text="文字带阴影" />
演示效果如下:
1.1 ToggleButton和Switch
严格意义来讲,这俩货都是Button派生出CompoundButton下的,不信看看官方提供API层级:
先从ToggleButton说起:
ToggleButton作为显示选中/未选中状态作为带有“指示灯”指示灯的按钮,默认情况下显示文字“开”或“关”。
另外我们还需要注意以下:
Android 4.0(API级别14)引入了另一种称为开关的切换按钮,它提供了一个滑块控件,可以为该控件添加一个Switch对象。 SwitchCompat是在设备上运行回到API 7的Switch小部件的一个版本。
下面附上官方盗图:
了解下旗下的XML属性:
Enmmm,还有如下:
查看官方为我们暴露的API:
下面来简单演示一波:
首先摆放ToggleButton控件:
<ToggleButton
android:id="@+id/tbtn_off"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
设置事件:
private void initEvent() {
mBind.tbtnOff.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
if (isChecked) {
mBind.tbtnOff.setTextOff("开启");
} else {
mBind.tbtnOff.setTextOff("关闭");
}
}
});
}
查看效果:
下面来说说我们的Switch小哥哥~
Switch是一个双态切换开关小部件,可以在两个选项中进行选择。用户可以前后拖动“拇指”来选择所选的选项,或者只需点击切换,就好像它是一个复选框。
该text 属性控制在标签切换显示的文本,而 off与on文本控件的大拇指上的文字。类似地, textAppearance和相关的setTypeface()方法控制标签文本的字体和样式,而switchTextAppearance和相关的setSwitchTypeface()方法控制该文本 的大小。
来瞅瞅官方提供的XML属性:
以及暴露的公共方法:
。。。
先来看一波效果图:
下面附上源码:
<?xml version="1.0" encoding="utf-8"?>
<layout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
android:padding="15dp"
tools:context=".study.SwitchActivity">
<Switch
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:showText="true"
android:splitTrack="true"
android:switchMinWidth="100dp"
android:textOff=" "
android:textOn=" " />
<Switch
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:showText="true"
android:splitTrack="true"
android:switchMinWidth="100dp"
android:textOff="开"
android:textOn="关" />
<android.support.v7.widget.SwitchCompat
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:text="渣渣贺,再来个高仿IOS效果的吧~~~" />
<Switch
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:switchMinWidth="20dp"
android:textOff=" "
android:textOn=" "
android:thumb="@drawable/selector_thumb"
android:track="@drawable/selector_track" />
</LinearLayout>
</layout>
而我们最后的仿IOS效果,它的样式氛围俩个效果:thumb以及track。
那么针对thunb,我们需要注意以下:
遂定义shape_bottom_close.xml文件:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<size
android:width="40dp"
android:height="40dp" />
<corners android:radius="20dp" />
<gradient
android:endColor="#eeeeee"
android:startColor="#eeeeee" />
<stroke
android:width="1dp"
android:color="#666666" />
</shape>
遂定义shape_bottom_open.xml文件:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<size
android:width="40dp"
android:height="40dp" />
<corners android:radius="20dp" />
<gradient
android:endColor="#eeeeee"
android:startColor="#eeeeee" />
<stroke
android:width="1dp"
android:color="#33da33" />
</shape>
最后组合一块,定义selector_thumb.xml文件:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/shape_bottom_open" android:state_checked="true" />
<item android:drawable="@drawable/shape_bottom_close" />
</selector>
而关于滑动时的背景色,则如同上面角标设置一样:
遂定义shape_button_close.xml文件:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<size
android:width="40dp"
android:height="40dp" />
<corners android:radius="20dp" />
<gradient
android:endColor="#eeeeee"
android:startColor="#eeeeee" />
<stroke
android:width="1dp"
android:color="#666666" />
</shape>
遂定义shape_button_open.xml文件:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<size android:height="20dp" />
<corners android:radius="20dp" />
<gradient
android:endColor="#33da33"
android:startColor="#33da33" />
</shape>
最后组合起来即可,遂定义selector_track.xml文件:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<item android:drawable="@drawable/shape_button_open" android:state_checked="true" />
<item android:drawable="@drawable/shape_button_close" />
</selector>
Enmmm,就这样大功告成了,虽然和IOS相比有些生硬,后期可以通过动画或者直接自定义View,重写即可实现,这里就不一一讲述了。
二、ExpandableListView
老规矩,查看官方提供API层级:
其实要说这位是个什么鬼?直接查看QQ联系人那块即可明了。
先看一下实现的效果:
模拟下接下来要用的Json格式:
那就搞起来~~~
Step 1:搭建布局
<?xml version="1.0" encoding="utf-8"?>
<layout>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".study.ExpandableListViewActivity">
<ExpandableListView
android:id="@+id/elv_show"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.constraint.ConstraintLayout>
</layout>
Step 2:依据Json生成实体类
有需要的看源码吧~
Step 3:Adapter开撸
package com.hlq.androidroad_01.adapter;
import android.content.Context;
import android.graphics.Color;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseExpandableListAdapter;
import android.widget.LinearLayout;
import android.widget.TextView;
import com.hlq.androidroad_01.HttpBean;
import com.hlq.androidroad_01.R;
import java.util.List;
/**
* author : HLQ
* e-mail : 925954424@qq.com
* time : 2018/06/14
* desc :
* version: 1.0
*/
public class ExpandableListViewAdapter extends BaseExpandableListAdapter {
private Context mContext;
private List<HttpBean> mGroupBeanList;
public ExpandableListViewAdapter(Context mContext, List<HttpBean> mGroupBeanList) {
this.mContext = mContext;
this.mGroupBeanList = mGroupBeanList;
}
@Override
public int getGroupCount() {
return mGroupBeanList.size();
}
@Override
public int getChildrenCount(int groupPosition) {
return mGroupBeanList.get(groupPosition).getGroup_info().size();
}
@Override
public Object getGroup(int groupPosition) {
return mGroupBeanList.get(groupPosition);
}
@Override
public Object getChild(int groupPosition, int childPosition) {
return mGroupBeanList.get(groupPosition).getGroup_info().get(childPosition);
}
@Override
public long getGroupId(int groupPosition) {
return groupPosition;
}
@Override
public long getChildId(int groupPosition, int childPosition) {
return childPosition;
}
@Override
public boolean hasStableIds() {
return false;
}
@Override
public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {
if (convertView == null) {
convertView = LayoutInflater.from(mContext).inflate(R.layout.item_layout, null);
}
LinearLayout group = convertView.findViewById(R.id.group);
group.setBackgroundColor(Color.GRAY);
View view = convertView.findViewById(R.id.view_group);
TextView tvTitle = convertView.findViewById(R.id.tv_group_title);
if (groupPosition % 2 == 0) {
view.setBackgroundColor(Color.RED);
} else {
view.setBackgroundColor(Color.GREEN);
}
tvTitle.setText(mGroupBeanList.get(groupPosition).getGroup_name());
return convertView;
}
@Override
public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {
if (convertView == null) {
convertView = LayoutInflater.from(mContext).inflate(R.layout.item_layout, null);
}
View view = convertView.findViewById(R.id.view_group);
TextView tvTitle = convertView.findViewById(R.id.tv_group_title);
if (childPosition % 2 == 0) {
view.setBackgroundColor(Color.RED);
} else {
view.setBackgroundColor(Color.GREEN);
}
tvTitle.setText(mGroupBeanList.get(groupPosition).getGroup_info().get(childPosition).getChild_name());
return convertView;
}
@Override
public boolean isChildSelectable(int groupPosition, int childPosition) {
return false;
}
}
Step 4:Enmmm,最后再哆嗦一波~
package com.hlq.androidroad_01.study;
import android.databinding.DataBindingUtil;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import com.google.gson.Gson;
import com.google.gson.reflect.TypeToken;
import com.hlq.androidroad_01.HttpBean;
import com.hlq.androidroad_01.R;
import com.hlq.androidroad_01.adapter.ExpandableListViewAdapter;
import com.hlq.androidroad_01.databinding.ActivityExpandableListViewBinding;
import java.util.List;
public class ExpandableListViewActivity extends AppCompatActivity {
private ActivityExpandableListViewBinding mBind;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mBind = DataBindingUtil.setContentView(this, R.layout.activity_expandable_list_view);
initView();
}
private void initView() {
ExpandableListViewAdapter adapter = new ExpandableListViewAdapter(this, getHttpBeanList());
mBind.elvShow.setAdapter(adapter);
}
public List<HttpBean> getHttpBeanList() {
String jsonStr = "[{\"group_id\":\"001\",\"group_name\":\"河北省\",\"group_info\":[{\"child_id\":\"1\",\"child_name\":\"张家口\"},{\"child_id\":\"1\",\"child_name\":\"尚义\"},{\"child_id\":\"1\",\"child_name\":\"红土梁\"}]},{\"group_id\":\"001\",\"group_name\":\"北京市\",\"group_info\":[{\"child_id\":\"1\",\"child_name\":\"昌平\"},{\"child_id\":\"1\",\"child_name\":\"海淀\"}]},{\"group_id\":\"001\",\"group_name\":\"上海\",\"group_info\":[{\"child_id\":\"1\",\"child_name\":\"金山\"},{\"child_id\":\"1\",\"child_name\":\"浦东\"},{\"child_id\":\"1\",\"child_name\":\"浦西\"}]},{\"group_id\":\"001\",\"group_name\":\"搞个妹子\",\"group_info\":[]},{\"group_id\":\"001\",\"group_name\":\"哇咔咔\",\"group_info\":[{\"child_id\":\"1\",\"child_name\":\"嘻嘻嘻\"},{\"child_id\":\"1\",\"child_name\":\"嗷呜呜\"},{\"child_id\":\"1\",\"child_name\":\"嘿嘿嘿\"}]}]";
List<HttpBean> httpBeanList = new Gson().fromJson(jsonStr, new TypeToken<List<HttpBean>>() {
}.getType());
return httpBeanList;
}
}
三、AdapterViewAnimator
首先,老规矩,查看官方API提供的层级结构:
由上可见,直接派生出俩个子类,分别为AdapterViewFlipper以及StackView。这俩个东东说实话,LZ没怎么了解过,下面一起爽爽吧~
再来说下,AdapterViewAnimatore是个什么鬼?
鉴名其意,这是用于AdaterView的动画效果。那么下面看看官方所述:
AdapterView在其视图之间切换时,它的基类将执行动画。
这里查看下官方提供的属性:
3.1 AdapterViewFlipper
老规矩,官方查看API层级,简单了解:
据官方所述:
AdapterViewFlipper是一个很简单ViewAnimator,它将在添加到它的两个或多个视图之间生成动画。一次只显示一个孩子。如果有要求,可以定期在每个孩子之间自动翻动。
下面来看下为我们暴露的XML属性:
而下面则从官方截取暴露出来的公共方法:
再瞅瞅内容受保护的方法:
大体作为了解,参考,后期有需要的时候细细品味~
首先,来搭建我们的布局:
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="15dp"
tools:context=".study.AdapterViewFlipperActivity">
<Button
android:id="@+id/btn_pre"
style="@style/ButtonStyle"
android:layout_toStartOf="@id/btn_auto"
android:text="上一项" />
<Button
android:id="@+id/btn_auto"
style="@style/ButtonStyle"
android:layout_centerHorizontal="true"
android:text="自动播放" />
<Button
android:id="@+id/btn_next"
style="@style/ButtonStyle"
android:layout_toRightOf="@id/btn_auto"
android:text="下一项" />
<AdapterViewFlipper
android:id="@+id/vf_show"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/btn_auto" />
</RelativeLayout>
</layout>
接着实例化:
package com.hlq.androidroad_01.study;
import android.databinding.DataBindingUtil;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.SimpleAdapter;
import com.hlq.androidroad_01.R;
import com.hlq.androidroad_01.databinding.ActivityAdapterViewFlipperBinding;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
/**
* author : HLQ
* e-mail : 925954424@qq.com
* time : 2018/06/13
* desc : AdapterViewFlipper学习
* version: 1.0
*/
public class AdapterViewFlipperActivity extends AppCompatActivity implements View.OnClickListener {
private ActivityAdapterViewFlipperBinding mFlipperBind;
private int[] mImgRes = {
R.drawable.img_01, R.drawable.img_02, R.drawable.img_03,
R.drawable.img_04, R.drawable.img_05, R.drawable.img_06
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mFlipperBind = DataBindingUtil.setContentView(this, R.layout.activity_adapter_view_flipper);
initView();
initEvent();
}
private void initEvent() {
mFlipperBind.btnPre.setOnClickListener(this);
mFlipperBind.btnAuto.setOnClickListener(this);
mFlipperBind.btnNext.setOnClickListener(this);
}
private List<Map<String, Integer>> getImageData() {
List<Map<String, Integer>> imageResList = new ArrayList<>();
for (int i = 0; i < mImgRes.length; i++) {
HashMap<String, Integer> map = new HashMap<>();
map.put("img", mImgRes[i]);
imageResList.add(map);
}
return imageResList;
}
private void initView() {
SimpleAdapter adapter = new SimpleAdapter(this, getImageData(),
R.layout.item_image_view,
new String[]{"img"},
new int[]{R.id.item_img});
mFlipperBind.vfShow.setAdapter(adapter);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.btn_pre:
mFlipperBind.vfShow.showPrevious();
if (mFlipperBind.vfShow.isFlipping()) {
mFlipperBind.vfShow.stopFlipping();
}
break;
case R.id.btn_auto:
mFlipperBind.vfShow.setFlipInterval(1500);
mFlipperBind.vfShow.startFlipping();
break;
case R.id.btn_next:
mFlipperBind.vfShow.showNext();
if (mFlipperBind.vfShow.isFlipping()) {
mFlipperBind.vfShow.stopFlipping();
}
break;
}
}
}
最后查看效果:
看到这个,我们能不能搞个轮播图呢?
3.2 StackView基本用法
首先依旧查看官方给出的层级,大概有个了解:
StackViewshi AdapterViewAnimator的子类,它主要用于显示Adapter提供的一系列View。而它将会以“堆叠”方式来展示多个item项。
StackView提供了俩种操作方式,如下:
下面从官方找了些API,如下:
一起来看下效果:
先放置我们的布局文件:
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".study.StackViewActivity">
<Button
android:id="@+id/pre_btn"
style="@style/ButtonStyle"
android:text="上一张" />
<Button
android:id="@+id/next_btn"
style="@style/ButtonStyle"
android:layout_toRightOf="@id/pre_btn"
android:text="下一张" />
<StackView
android:id="@+id/stackView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/pre_btn"
android:loopViews="true" />
</RelativeLayout>
</layout>
再来分分钟实现一波:
package com.hlq.androidroad_01.study;
import android.databinding.DataBindingUtil;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.SimpleAdapter;
import com.hlq.androidroad_01.R;
import com.hlq.androidroad_01.databinding.ActivityStackViewBinding;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
/**
* author : HLQ
* e-mail : 925954424@qq.com
* time : 2018/03/12
* desc : StackView学习
* version: 1.0
*/
public class StackViewActivity extends AppCompatActivity implements View.OnClickListener {
private ActivityStackViewBinding mStackBind;
private int[] mImgRes = {
R.drawable.img_01, R.drawable.img_02, R.drawable.img_03,
R.drawable.img_04, R.drawable.img_05, R.drawable.img_06
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mStackBind = DataBindingUtil.setContentView(this, R.layout.activity_stack_view);
initView();
initEvent();
}
private void initEvent() {
mStackBind.preBtn.setOnClickListener(this);
mStackBind.nextBtn.setOnClickListener(this);
}
private void initView() {
SimpleAdapter adapter = new SimpleAdapter(
this, getImageData(), R.layout.item_stack_view,
new String[]{"img"},
new int[]{R.id.item_img});
mStackBind.stackView.setAdapter(adapter);
}
private List<Map<String, Integer>> getImageData() {
List<Map<String, Integer>> imageResList = new ArrayList<>();
for (int i = 0; i < mImgRes.length; i++) {
HashMap<String, Integer> map = new HashMap<>();
map.put("img", mImgRes[i]);
imageResList.add(map);
}
return imageResList;
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.pre_btn:
mStackBind.stackView.showPrevious();
break;
case R.id.next_btn:
mStackBind.stackView.showNext();
break;
}
}
}
欢迎各位老铁关注~不定期发布~见证你我的成长路~!!!
觉得不错,动动小手,转发让更多人看到,3Q,比心~