进度条类组件
-
进度条
<ProgressBar
android:max:设置最大进度
android:progress:设置当前进度
style ="" 设置进度条类型,如:
?android:attr/progressBarStyleHorizontal:长条进度条
?android:attr/progressBarStyleSmall:小圆型进度条
?android:attr/progressBarStyleLarge:大圆型进度条
@android:style/Widget.ProgressBar.Horizontal:粗长条进度条
@android:style/Widget.ProgressBar.Large:旋转画面的大圆型进度条
@android:style/Widget.ProgressBar,Small:旋转画面的小圆形进度条>
当进度条到100%时提示成功
<ProgressBar
android:id="@+id/progressbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@android:style/Widget.ProgressBar.Horizontal"
android:max="100"
android:layout_alignParentBottom="true"
android:layout_marginBottom="50dp"
/>
public class MainActivity extends AppCompatActivity {
private ProgressBar progressBar;
private int mprogress=0;
private Handler mHandle;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
progressBar = this.findViewById(R.id.progressbar);
mHandle = new Handler(){
@Override
public void handleMessage(@NonNull Message msg) {
if (msg.what ==0x111){
progressBar.setProgress(mprogress);
}else {
Toast.makeText(MainActivity.this,"耗时操作已完成",Toast.LENGTH_LONG).show();
progressBar.setVisibility(View.GONE);
}
}
};
new Thread(new Runnable() {
@Override
public void run() {
while (true){
mprogress = doWork();
Message m = new Message();
if (mprogress <100){
m.what = 0x111;//操作未完成
mHandle.sendMessage(m);
}else {
m.what=0x110;//操作已完成
mHandle.sendMessage(m);
break;
}
}
}
private int doWork(){
mprogress+= Math.random()*100;
try {
Thread.sleep(200);
} catch (InterruptedException e) {
e.printStackTrace();
}
return mprogress;
}
}).start();
}
}
- 拖动条
<SeekBar
android:thumb:设置拖动点的图片
>
设值拖动条调整图片的透明度
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@mipmap/bg"
android:scaleType="fitXY"/>
<SeekBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="255"
android:progress="120"
android:layout_alignParentBottom="true"
android:id="@+id/seekbar"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/rabbit"
android:layout_above="@+id/seekbar"
android:id="@+id/image"
/>
public class MainActivity extends AppCompatActivity {
SeekBar seekBar;
private ImageView image;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
seekBar = this.findViewById(R.id.seekbar);
image=this.findViewById(R.id.image);
seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
image.setImageAlpha(progress);
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
}
});
}
}
-
星级评分条
<RatingBar
android:numStarts :设置星级数量
android:rating:设置初始所选的星级数量
android:stepSize:设置每次选取星级数量
android:isIndicator:设置是否能够修改星级>
实现淘宝评价
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="店铺评分"
android:textSize="20sp"
android:layout_above="@+id/btn"
android:layout_marginBottom="130dp"
/>
<RatingBar
android:id="@+id/ratingbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:rating="5"
android:layout_above="@+id/btn"
android:layout_marginBottom="60dp"
/>
<Button
android:id="@+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:background="#FF5000"
android:text="提交"
/>
public class MainActivity extends AppCompatActivity {
private RatingBar ratingBar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ratingBar = this.findViewById(R.id.ratingbar);
Button button = this.findViewById(R.id.btn);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
float rating = ratingBar.getRating();
Toast.makeText(MainActivity.this,"你得到了"+rating+"颗星评价",Toast.LENGTH_LONG).show();
}
});
}
}
图像类组件
- 图像视图
<ImageView
android:src:设置图像
android:scaleType:设置图像的缩放
CENTER /center 按图片的原来size居中显示,当图片长/宽超过View的长/宽,则截取图片的居中部分显示
CENTER_CROP / centerCrop 按比例扩大图片的size居中显示,使得图片长(宽)等于或大于View的长(宽)
CENTER_INSIDE / centerInside 将图片的内容完整居中显示,通过按比例缩小或原来的size使得图片长/宽等于或小于View的长/宽
FIT_CENTER / fitCenter 把图片按比例扩大/缩小到View的宽度,居中显示
FIT_END / fitEnd 把图片按比例扩大/缩小到View的宽度,显示在View的下部分位置
FIT_START / fitStart 把图片按比例扩大/缩小到View的宽度,显示在View的上部分位置
FIT_XY / fitXY 把图片不按比例扩大/缩小到View的大小显示
MATRIX / matrix 用矩阵来绘制,动态缩小放大图片来显示。
android:adjustViewBounds:设置是否允许调整自己的边界,来保持所显示图片的长宽比
android:maxWidth:设置图片最大宽度,需要先设置 android:adjustViewBounds为true
android:maxHeight:设置图片最大高度
app:tint:设置图片的颜色
android:contentDescription:自动朗诵定义的内容
>
-
图像切换器
<ImageSwitcher>
实现手机相册图像切换
<ImageSwitcher
android:id="@+id/imageswitcher"
android:layout_centerVertical="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
</ImageSwitcher>
public class MainActivity extends AppCompatActivity {
private int[] arrayPicture = new int[]{R.drawable.bg,R.drawable.icon1,R.drawable.icon2,R.drawable.rabbit};
private ImageSwitcher imageSwitcher;
private int index;
private float touchDownX;
private float touchUpX;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
imageSwitcher = this.findViewById(R.id.imageswitcher);
imageSwitcher.setFactory(new ViewSwitcher.ViewFactory() {
@Override
public View makeView() {
ImageView imageView = new ImageView(MainActivity.this);
imageView.setImageResource(arrayPicture[index]);
return imageView;
}
});
imageSwitcher.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
//判断是按下还是离开
if (event.getAction() ==MotionEvent.ACTION_DOWN){
touchDownX = event.getX();
return true;
}else if (event.getAction()==MotionEvent.ACTION_UP){
touchUpX = event.getX();
if (touchUpX-touchDownX>100){
index = index==0?arrayPicture.length-1:index-1;
//设置图片淡出效果
imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(MainActivity.this, android.R.anim.fade_out));
//设置图片进入效果
imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(MainActivity.this, android.R.anim.fade_in));
imageSwitcher.setImageResource(arrayPicture[index]);
}else if (touchDownX-touchUpX>100){
index = index==arrayPicture.length-1?0:index+1;
imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(MainActivity.this, android.R.anim.fade_out));
imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(MainActivity.this, android.R.anim.fade_in));
imageSwitcher.setImageResource(arrayPicture[index]);
}
return true;
}
return false;
}
});
}
}
-
网格视图
适配器:将后台与前端数据格式进行转换
ArrayAdapter
SimpleAdapter
simpleCursorAdapter
BaseAdapter<GrideView
android:numClolunms:设置每行列数
android:verticalSpacing:设置垂直间距
android:columnWidth:设置列宽
>实现手机相册:自定义图像适配器
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@drawable/line"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2020年10月30号"
android:paddingBottom="10dp"
android:paddingTop="10dp"
/>
<GridView
android:id="@+id/gridview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:numColumns="auto_fit"
android:gravity="center"
android:verticalSpacing="5dp"
android:columnWidth="100dp"
></GridView>
public class MainActivity extends AppCompatActivity {
private int[] picture = new int[]{R.drawable.icon1,R.drawable.icon1,R.drawable.icon2,R.drawable.icon1,R.drawable.icon1,R.drawable.icon1,
R.drawable.icon1,R.drawable.icon1,R.drawable.icon1,R.drawable.icon1,R.drawable.icon1,
R.drawable.icon1,R.drawable.icon1,R.drawable.icon1,R.drawable.icon1};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
GridView gridView = (GridView) findViewById(R.id.gridview);
gridView.setAdapter(new ImageAdapter(this));
}
public class ImageAdapter extends BaseAdapter{
private Context mContext;
public ImageAdapter(Context c){
this.mContext = c;
}
@Override
public int getCount() {
return picture.length;
}
@Override
public Object getItem(int position) {
return null;
}
@Override
public long getItemId(int position) {
return 0;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView = null;
if (convertView ==null){
imageView = new ImageView(mContext);
imageView.setLayoutParams(new ViewGroup.LayoutParams(100,90));
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
}else {
imageView =(ImageView) convertView;
}
imageView.setImageResource(picture[position]);
return imageView;
}
}
}
列表类组件
- 下拉列表框
<Spinner
android:entries:设置列表数据,自定义一个数组资源文件,将该资源文件内容作为参数导入
<resources>
<string-array name="ctype">
<item>全部</item>
<item>篮球</item>
<item>音乐</item>
<item>学习</item>
</string-array>
</resources>
>
实现豆瓣下拉列表
<Spinner
android:id="@+id/spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:entries="@array/ctype"
></Spinner>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="搜索"
android:textColor="@color/black"/>
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Spinner spinner = (Spinner) findViewById(R.id.spinner);
spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
@Override
public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
String result = parent.getItemAtPosition(position).toString();
Toast.makeText(MainActivity.this,result,Toast.LENGTH_LONG).show();
}
@Override
public void onNothingSelected(AdapterView<?> parent) {
}
});
}
}
- 列表视图
<ListView
android:entries:设置列表数据
android:scrollview:设置右侧滑动条是否显示
>
若不在UI界面中设置数据,则可以在java代码中设置适配器。
实现微信通讯录朋友列表
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@drawable/b2"/>
<ListView
android:id="@+id/listview"
android:layout_width="match_parent"
android:layout_height="300dp"
/>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@drawable/b2"/>
定义一个xml,指明列表项数据的格式
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:id="@+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:paddingRight="10dp"
android:adjustViewBounds="true"
android:maxWidth="72dp"
android:maxHeight="72dp"
/>
<TextView
android:id="@+id/title"
android:padding="10dp"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
int[] imageid = new int[]{R.drawable.icon1,R.drawable.icon1,R.drawable.icon1,
R.drawable.icon1,R.drawable.icon1,R.drawable.icon1,
R.drawable.icon1,R.drawable.icon1,R.drawable.icon1};
String[] title = new String[]{"zhang","zhang","zhang",
"zhang","zhang","zhang",
"zhang","zhang","zhang",};
List<Map<String,Object>> listitem = new ArrayList<>();
for (int i = 0 ; i<imageid.length ; i++){
HashMap<String, Object> map = new HashMap<>();
map.put("image",imageid[0]);
map.put("name",title[i]);
listitem.add(map);
}
SimpleAdapter adapter = new SimpleAdapter(this, listitem, R.layout.main, new String[]{"name", "image"}, new int[]{R.id.title, R.id.image});
ListView listView = this.findViewById(R.id.listview);
listView.setAdapter(adapter);
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
HashMap<String, Object> map = (HashMap<String, Object>) parent.getItemAtPosition(position);
Toast.makeText(MainActivity.this,map.get("name").toString(),Toast.LENGTH_LONG).show();
}
});
}
}
通用组件
-
滚动视图
<ScrollView :垂直滚动>
<HorizontalScrollView :水平滚动>将组件放进滚动视图中即可实现,但一个滚动视图只能放一个组件,若要放多个组件则需先创建一个布局管理器,将多个组件放进布局管理器中。
使用java代码实现多个组件滚动视图
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/zz"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<string name="cidina">asdasd
asdasdads
asdasdasdasd
fffffffffffffffffffff
ffffffffffffffffffffffffff
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
asd
asd
aasda
sd
asd
asd
a
d
asd
as
d
asddddddddddddddddddddddddddddddddddddd
adddddddddddddddddddddddddddddddddddddddddddddddd
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</string>
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
LinearLayout linearLayout = this.findViewById(R.id.zz);
LinearLayout ll2 = new LinearLayout(MainActivity.this);
ll2.setOrientation(LinearLayout.VERTICAL);
ScrollView scrollView = new ScrollView(MainActivity.this);
linearLayout.addView(scrollView);
scrollView.addView(ll2);
ImageView imageView = new ImageView(MainActivity.this);
imageView.setImageResource(R.drawable.rabbit);
ll2.addView(imageView);
TextView textView = new TextView(MainActivity.this);
textView.setText(R.string.cidina);
ll2.addView(textView);
}
}
-
选项卡
- 在布局文件中添加TabHost、TabWidget和TabContent组件
- 编写各标签页的XML布局文件
- 获取并初始化TabHost组件
- 为TabHost对象添加标签页
实现微信表情商店,可有两页不同的图片分别点击出现
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@android:id/tabhost"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TabWidget
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@android:id/tabs"></TabWidget>
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent"></FrameLayout>
</LinearLayout>
</TabHost>
定义两个标签页
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
android:id="@+id/right">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/rabbit"/>
</LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
android:id="@+id/left">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/bg"/>
</LinearLayout>
java代码加载标签页
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
TabHost tabHost = findViewById(android.R.id.tabhost);
//初始化
tabHost.setup();
LayoutInflater inflater = LayoutInflater.from(this);
inflater.inflate(R.layout.tab1,tabHost.getTabContentView());
inflater.inflate(R.layout.tab2,tabHost.getTabContentView());
//设置标签页
tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("精选表情").setContent(R.id.left));
tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("投稿表情").setContent(R.id.right));
}
}