Android仿主流壁纸App设置界面

摘要:项目中做到在线壁纸应用,在壁纸设置界面也是参考了主流壁纸应用的做法,例如小米,vivo,搜狗等都是采用了类似下图的界面布局。这里将介绍如何做出类似布局和功能。

在图中,当手指滑动滑块的时候,背景图片也会跟着左右滑动。图片很好想到,可以将ImageView放在HorizontalScrollView,当图片的宽度大于屏幕宽度的时候,图片就可以在HorizontalScrollView中进行左右滑动。接下来就是思考这个滑块如何实现,当时考虑过自定义View的方式,后来某个时刻灵光一闪,发现系统的音量调节界面与其很类似,后来通过查阅相关资料发现有个叫SeekBar的控件。但是原生的SeekBar不是长这个样子,需要你找UI人员做图,替换系统自带的图片就可以了。废话不多说,直接看布局文件:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/viewpager_ll"

android:layout_width="match_parent"

android:layout_height="match_parent" >

<com.dighammer.slidewallpaper.DigHorizontalScrollView

android:id="@+id/hs"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:fillViewport="true"

android:scrollbars="none" >

<ImageView

android:id="@+id/iv"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_alignParentLeft="true"

android:layout_alignParentTop="true"

android:scaleType="fitXY"

android:src="@drawable/cat" />

</com.dighammer.slidewallpaper.DigHorizontalScrollView>

<SeekBar

android:id="@+id/seekBar"

android:layout_width="@dimen/seekbar_width"

android:layout_height="@dimen/seekbar_height"

android:layout_alignParentBottom="true"

android:layout_centerHorizontal="true"

android:layout_marginBottom="@dimen/seekbar_margin"

android:background="@drawable/setting_wallpaper_seekbar_bg"

android:paddingLeft="@dimen/seekbar_padding"

android:paddingRight="@dimen/seekbar_padding"

android:progressDrawable="@drawable/progress_bg"

android:thumb="@drawable/setting_wallpaper_seekbar_slider" />

</RelativeLayout>

这里,我重写了HorizontalScrollView,屏蔽其Tonch事件。因为这里仅需要SeekBar来控制图片的左右滑动。接下来是

MainActivity实现代码:

package com.dighammer.slidewallpaper;

import android.content.Context;

import android.os.Bundle;

import android.os.Handler;

import android.support.v7.app.ActionBarActivity;

import android.view.View;

import android.view.ViewTreeObserver;

import android.view.ViewTreeObserver.OnGlobalLayoutListener;

import android.view.WindowManager;

import android.widget.ImageView;

import android.widget.SeekBar;

import android.widget.SeekBar.OnSeekBarChangeListener;

/**

*

* @author DigHammer

* */

public class MainActivity extends ActionBarActivity implements

OnGlobalLayoutListener, OnSeekBarChangeListener {

private DigHorizontalScrollView mHScrollView;

private SeekBar mSeekBar;

private ImageView mImageView;

Handler mHandler = new Handler();

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

mHScrollView = (DigHorizontalScrollView) findViewById(R.id.hs);

mSeekBar = (SeekBar) findViewById(R.id.seekBar);

mImageView = (ImageView) findViewById(R.id.iv);

// ImageView图片设置完成的监听事件

ViewTreeObserver vto = mImageView.getViewTreeObserver();

vto.addOnGlobalLayoutListener(this);

mSeekBar.setOnSeekBarChangeListener(this);

}

@Override

public void onProgressChanged(SeekBar seekBar, int progress,

boolean fromUser) {

// 图片随着SeekBar滑动而滑动

mHScrollView.smoothScrollTo(progress, 0);

}

@Override

public void onStartTrackingTouch(SeekBar seekBar) {

// TODO Auto-generated method stub

}

@Override

public void onStopTrackingTouch(SeekBar seekBar) {

// TODO Auto-generated method stub

final int max = Integer.valueOf(mSeekBar.getTag().toString());

// 设置滑块永远居中

if (mSeekBar.getProgress() != max / 2) {

// 加runnable是为了使滚动条平滑滚动

mSeekBar.setProgress(max / 2);

Runnable r = new Runnable() {

@Override

public void run() {

mHScrollView.smoothScrollTo(max / 2, 0);

}

};

mHandler.postDelayed(r, 100);

}

}

@Override

public void onGlobalLayout() {

// TODO Auto-generated method stub

WindowManager wm = (WindowManager) getSystemService(Context.WINDOW_SERVICE);

int wmWidth = wm.getDefaultDisplay().getWidth();

int imageWidth = mImageView.getWidth();

// 比较图片的宽度和屏幕的宽度

if (imageWidth <= wmWidth) {

mSeekBar.setVisibility(View.GONE);

} else {

mSeekBar.setVisibility(View.VISIBLE);

}

int max = imageWidth - wmWidth;

// 保存max

mSeekBar.setTag(max);

// 设置sekbar初始位置

mSeekBar.setMax(max);

mSeekBar.setProgress(max / 2);

// 让图片居中显示

mHScrollView.scrollTo(max / 2, 0);

}

}

这里主要是两个监听事件:一个是ImageView图片显示完成的监听,另外一个就是SeekBar的滑动监听。

此Demo的代码还是挺简单的,但是从中找到了“模仿”的乐趣!!!

附件Demo下载:点击打开链接

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

以上是 Android仿主流壁纸App设置界面 的全部内容, 来源链接: utcz.com/p/241536.html

回到顶部