Android应⽤开发⼊门教程（经典版）
第⼀篇Android系统结构和SDK使⽤
第1章 Android的系统介绍
第2章 Android SDK的开发环境
第⼆篇 Android应⽤程序的概述和框架
第3章 Android应⽤层程序的开发⽅式
第4章Android应⽤程序⽰例
第5章 Android应⽤程序的内容
第三篇Android的UI系统实现
第6章 UI的基本外形和控制
第7章 控件（Widget）的使⽤
第8章 视图组（ViewGroup）和布局（Layout）的使⽤
简述android概述第9章 2D图形接⼝的使⽤
第10章 OpenGL 3D图形的使⽤
⽂件：（访问密码：551685）
以下内容⽆关：
-------------------------------------------分割线---------------------------------------------
pathView的使⽤类似与ListView，都需要模型(model)和代理(delegate)，只不过pathView多了⼀个路径(path)属性，顾名思义路径就是item 滑动的路径.
⼀个Path可以由下⾯多个Path段组成(之前讲解PathAnimation时提过):
PathLine : 由⼀个坐标指定的直线路径
PathPolyline : 由⼀个path坐标列表指定的多段路径
PathQuad : 由⼀个控制点⽣成的⼆次贝塞尔曲线路径
PathCubic : 由两个控制点⽣成的三次贝塞尔曲线路径
PathArc : 由结束坐标，以及⼀个radiusX和radiusY半径实现的⼀个圆弧(顺时针绘画)
PathAngleArc : 由中⼼点、半径和起始⾓度startAngle、旋转⾓度sweepAngle指定的圆弧。
PathCurve : 由⼀个坐标点⽣成的curve曲线路径(通常需要配合多个PathCurve才⾏)
PathSvg : 由SVG路径字符串实现的路径。你可以⽤它创建线条, 曲线, 弧形等等
下表概述了各种路径元素的适⽤性:
其中PathAttribute⽤来给路径上定义带有值的命名属性。⽽PathPercent则⽤来对每个间距进⾏⼀个调整。
1.PathAttribute
PathAttribute对象⽤来给路径上的不同点指定由name和value组成的⾃定义属性。⾃定义属性将会作为附加属性公开给委托。
路径上任何特定点上的属性值都是通过下个PathAttributes插⼊的。然后两个点之间的路径会根据属性
value值做插值计算.
⽐如下⾯这个(参考QT帮助):
复制代码
path: Path {
startX: 120; startY: 100
PathAttribute { name: “iconScale”; value: 1.0 } // 给(120,100)添加属性iconScale = 1.0、iconOpacity = 1.0
PathAttribute { name: “iconOpacity”; value: 1.0 }
PathQuad { x: 120; y: 25; controlX: 260; controlY: 75 }
PathAttribute { name: “iconScale”; value: 0.3 } // 给(120,25)添加属性iconScale = 0.3 iconOpacity = 0.5
PathAttribute { name: “iconOpacity”; value: 0.5 }
PathQuad { x: 120; y: 100; controlX: -20; controlY: 75 }
}
复制代码
这⾥我们最后还有⼀个贝塞尔曲线，终点是(120,100)，这⾥并未给它赋PathAttribute⾃定义属性，这是因为开头已经给(120,100)添加了属性.所以这⾥省略掉了.
⼤家不妨试试改成这样(其实效果⼀样):
复制代码
path: Path {
startX: 120; startY: 100
PathAttribute { name: “iconScale”; value: 1.0 } // 给(120,100)添加属性iconScale = 1.0、iconOpacity = 1.0 PathAttribute { name: “iconOpacity”; value: 1.0 }
PathQuad { x: 120; y: 25; controlX: 260; controlY: 75 }
PathAttribute { name: “iconScale”; value: 0.3 } // 给(120,25)添加属性iconScale = 0.3 iconOpacity = 0.5 PathAttribute { name: “iconOpacity”; value: 0.5 }
PathQuad { x: 120; y: 100; controlX: -20; controlY: 75 }
PathAttribute { name: “iconScale”; value: 1.0 } // 给(120,100)添加属性iconScale = 1.0、iconOpacity = 1.0 PathAttribute { name: “iconOpacity”; value: 1.0 }
}
复制代码
2.PathPercent
PathPercent⽤来设置每个路径上的显⽰item的百分⽐⽐例，通常放在路径元素后⾯，来指⽰前⾯的路径显⽰item的百分⽐⽐例⽐如下⾯⽰例:
复制代码
path:Path {
startX: 20; startY: 100
PathQuad { x: 50; y: 180; controlX: 0; controlY: 80 }
PathPercent { value: 0.25 }
PathLine { x: 150; y: 180 }
PathPercent { value: 0.75 }
PathQuad { x: 180; y: 100; controlX: 200; controlY: 80 }
}
复制代码
将50%的item放置在PathLine路径上，然后25%的item放置在其它PathQuad上.
3.PathView实战
我们参考韦东⼭之前发布的⼀个Qt开源视频，如下图所⽰:
最终做出来如下图所⽰:
效果图如下所⽰(有点⼤，需要多等下刷新出来):
源码已经上传到⾥，由于我们借⽤了别⼈的UI图，所以请不要将别⼈的UI图⽚⽤在商业上，仅供学习参考使⽤
核⼼代码如下所⽰:
复制代码
ListModel {
id: mymodel
ListElement {
name: "多媒体"
back: "qrc:/images/media_nor.png"
}
ListElement {
name: "系统设置"
back: "qrc:/images/system_nor.png"
}
ListElement {
name: "智能家电"
back: "qrc:/images/machine_nor.png"
}
ListElement {
name: "卫⽣医疗"
back: "qrc:/images/medical_nor.png"
}
}
ListElement {
name: "公共服务"
back: "qrc:/images/public_nor.png"
}
}
Component {
id: delegate
App {
id: rect
width: itemSize.width
height: itemSize.height
z: PathView.iconZ
scale: PathView.iconScale
imagSrc: back
label: name
enabled: view.opacity == 1.0
transform: Rotation{
origin.x: rect.width/2.0
origin.y: rect.height/2.0
axis{x:0;y:1;z:0}
angle: rect.PathView.iconAngle
}
MouseArea {
anchors.fill: parent
onClicked: {
if (view.currentIndex == index)
newJumpWindow("qrc:/AppWindow.qml", name)
}
}
}
}
PathView {
id: view
width: (itemCount-1.9)*itemSize.width
height: wind.height
model: mymodel
delegate: delegate
flickDeceleration: 300
preferredHighlightBegin: 0.5
preferredHighlightEnd: 0.5
pathItemCount: itemCount
clip: true
enabled: opacity == 1.0
path: Path {
id: path
startX: 0
startY: view.height * 0.45
PathAttribute{name:"iconZ";value: 0}
PathAttribute{name:"iconAngle";value: -50}
PathAttribute{name:"iconScale";value: 0.7}
PathLine{x:view.width/2; y: path.startY} // 设置初始Z为0,⾓度为70 ⼤⼩⽐例为0.6
PathAttribute{name:"iconZ";value: 100}
PathAttribute{name:"iconAngle";value: 0}
PathAttribute{name:"iconScale";value: 1.0}
PathLine{x:view.width; y: path.startY}
PathAttribute{name:"iconZ";value: 0}
PathAttribute{name:"iconAngle";value: 50}
PathAttribute{name:"iconScale";value: 0.7}
PathAttribute{name:"iconScale";value: 0.7}
}
}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论